How to Make Rounded Corners for ShortPoint Columns

By default, Columns have square corners:

This article will demonstrate how to make rounded column corners using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Column
  • Step 3: Add a Class Name
  • Step 4: Copy the Code
  • Step 5: Edit the Row
  • Step 6: Paste the Code
  • Step 7: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Copy the Custom CSS below before starting the interactive tutorial:

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

Step-by-step Tutorial

Follow for a detailed guide on how to make rounded Column corners:

Step 1: Edit the ShortPoint Web Part

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

• Click the cross icon to close the Toolbox:

• Click the ShortPoint tag.
• Click the Edit properties icon:

Step 2: Edit the Column

• Click the Column tag:

• Select the cogwheel icon:

Step 3: Add a Class Name

• Click the next icon:

• Navigate to the Custom CSS tab.
• Add ‘rounded-column’ as the Class name:

NOTEYou can change the Class name to any name you want. Just make sure to take note of it for the next step.

• Click the green check mark.
• Repeat steps 2 & 3 for all the Columns you want to make rounded.

Step 4: Copy the Code

Copy the Custom CSS code below:

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

NOTEIf you changed the Class in Step 3 to something other than 'rounded-column' make sure to replace rounded-column in the code with the Class Name you used. For example, if we used 'circle' as the Class Name, the code will be .circle {

Step 5: Edit the Row

• Click the Row tag of the column you just edited:

• Select the cogwheel icon:

Step 6: Paste the Code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code
• (Optional) Change the border-radius value according to your preferences.

Step 7: Save

• Click the green check mark to apply changes.
• Click the eye icon to see your page in real time:

• Click Save:

That’s it! You now have rounded Column corners.

Related articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• How to Make Circular ShortPoint Tiles
• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)