How can we help you today?

How to Make Rounded Corners for ShortPoint Panel

By default ShortPoint Panel design elements have square corners, like this: 


If you want to make these corners rounded, please check the steps below. Here’s the end result that you will achieve:



  • You need to have ShortPoint SPFx version or higher. In case you have an older version of ShortPoint, please visit our Download ShortPoint page and get the latest version of ShortPoint.

Step 1: Edit the page

After choosing a ShortPoint Tiles to modify, click the Edit web part button.

Step 2: Open settings of the Panel design element

Click the cog wheel that appears in Edit Mode when you hover over the element.

This tab will appear after opening the settings of the Panel design element:

Step 3: Switch to Custom CSS tab and paste the CSS code

Copy the customized CSS code and paste it to the Custom CSS field in the Custom CSS tab:

border-radius: 10px;


Click Update, and Save the page.


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


And now we have a Panel element with rounded corners:



That's it! In the same way, you also can apply this custom CSS feature to all of your Panel design elements.

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 49 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