How can we help you today?

How to Make Rounded Corners for ShortPoint Tiles

By default, ShortPoint Tiles Design Elements have square corners. It is possible to make them rounded.



If you would like to apply this solution, please follow the steps in this support article.



  • CSS customizations are available since ShortPoint SPFx version or higher. We recommend you to always have the latest version installed. You can download it Download ShortPoint page and get the latest version of ShortPoint.

Step 1. Insert ShortPoint Tiles Design Element

The Tiles Design Element can be easily added to your pages using ShortPoint Page Builder.

  • Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.

  • Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

Then, select the Tiles Design Element from your ShortPoint Page Builder menu:   

Step 2. Copy the code

Depending on the background you are going to use for your Tiles, copy the respective piece of CSS code: 

  • if you are using color as a background of your Tiles:

.shortpoint-tile-bg-color { 
border-radius: 10px;
.shortpoint-tile-content {
border-radius: 10px;

  • if you are using image as a background of your Tiles:

border-radius: 10px;
.shortpoint-tile-content {
border-radius: 10px;

Note: You can choose your own border-radius by modifying this property.

In case you are using the Flip style in Tiles, the above CSS will not work. Please use this one instead:
.shortpoint-tile-bg:before, .shortpoint-tile-bg-color {     
     border-radius: 10px;

Step 3. Open Custom CSS tab of ShortPoint Tiles

Edit the page. Open the settings of the Tiles by pressing the cog wheel icon:

Switch to Custom CSS tab: 

Step 4. Update the ShortPoint Tiles with code

Paste the code into the Custom CSS field as shown in the animation below:

You may check how it will look like on your page by clicking the Preview button:  

Then, click Update and save the page.  


That's it. Here is an example of how it may look like on the page: 

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 57 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more