How to Make Rounded Corners for ShortPoint Columns

NOTEStarting ShortPoint SPFx version8.4.2.0 and above, the Columns Design Element already has the Roundness feature. This feature allows you to round the corners of the Columns. For more information, check out Introducing the Roundness Feature: What It Is and How To Use It.

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)