How can we help you today?

How to Make Rounded Corners for ShortPoint Columns

By default, ShortPoint Columns have square corners. It is possible to make them rounded.


Before:

 

After: 


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


TABLE OF CONTENTS


Prerequisites

  • CSS customizations are available since ShortPoint SPFx version 5.2.2.28 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.
  • You have added ShortPoint webpart to your page.
  • You have set the background color or background image in the ShortPoint Column(s) which you want to modify with rounded corners. 

Step 1. Prepare the custom CSS code


Depending on your desired result, copy the respective piece of CSS code.


Option 1: You need to have rounded borders for all Columns


Please use the following piece of code:


.sp-type-column.shortpoint-col {
    border-radius: 10px !important;
}


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

Option 2: You need to have rounded borders for specific Columns


If you only want to change the corners of some Column(s), you need to add them special custom class:


1. Edit the page. Locate the Column you want to have rounded corners for, and open its settings by clicking the cog wheel icon:



2. Switch to the Custom CSS tab:



3. Add a class name to the Class field (1), and update the Column (2):



4. Repeat the same steps for other Columns you want to have rounded corners. The class name should remain the same.


Now, use the following piece of code:


.rounded-column {
    border-radius: 10px !important;
}


Replace the class name in the code snippet with the one you gave to your Columns.


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

Step 2. Open the Custom CSS tab of the ShortPoint Row


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



Switch to Custom CSS tab: 



Step 3. Update the ShortPoint Row with the code


Paste the code into the Custom CSS field:



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



Then, click Update and save the page.  



Result


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