Try ShortPoint nowNOTEStarting ShortPoint SPFx version8.4.2.0 and above, the Panel Design Element already has the Roundness feature. This feature allows you to round the corners of the Panel. For more information, check out Introducing the Roundness Feature: What It Is and How To Use It.
ShortPoint Panel design elements have square corners by default:
This article will demonstrate how to create rounded panel corners using Custom CSS.
TABLE OF CONTENTS
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.
- You must have a Panel Design Element on your page.
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.
- Once satisfied, click Save.
That's it! You can now apply this custom CSS feature to all of your Panel design elements.
Related articles:
