How can we help you today?

How to Make Rounded Corners for ShortPoint Panel

ShortPoint Panel design elements have square corners by default:

Square panel corners This article will demonstrate how to create rounded panel corners using Custom CSS.

rounded corners



Interactive Tutorial

Before proceeding, copy the Custom CSS below:

border-radius: 10px;

Step-by-step Tutorial

Follow the detailed guide below to learn how to create rounded panel corners:

Step 1: Edit the ShortPoint web part

  • Go to the SharePoint page you want to use and click Edit.


  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Copy the Custom CSS

  • Copy the custom CSS below:
border-radius: 10px;

Step 3: Paste the Custom CSS

NOTEBefore proceeding, make sure you already have the Panel Design Element on your page.
  • Click the Panel tag and select the cogwheel icon.
  • Navigate to the Custom CSS tab.
  • Paste the code you copied from Step 2 in the Custom CSS field.
  • (Optional) Modify the border-radius number according to your preference.
  • Click the green checkmark.

Step 4: Save

  • Click the eye icon to see how your page will look in real-time.

eye icon

  • Once satisfied, click Save.



That's it! You can now 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 53 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