Try ShortPoint nowShortPoint 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:
