Try ShortPoint nowBy default, the Button Design Element has square corners:
This tutorial will teach you how to make rounded Button 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 already have the Button Design Element on your page.
Interactive Tutorial
Before starting the tutorial, copy the Custom CSS code below:
.shortpoint-btn { border-radius: 10px !important;}Step-by-step Tutorial
Follow the detailed guide below to learn how to make rounded Button 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.
- Select the Edit properties icon:
Step 2: Copy the code
- Copy the Custom CSS code below:
.shortpoint-btn { border-radius: 10px !important;}Step 3: Edit the Row
NOTEBefore proceeding, make sure you already have the Button Design Element on your page. To learn how to add it, check out How to Customize the Button Design Element.
- Go to the Row where the Button is and click the Row tag:
- Select the cogwheel icon:
Step 4: Paste the code
- Click the next icon:
- Navigate to the Custom CSS tab.
- Paste the code.
- (Optional) Customize the border-radius value according to your needs.
Step 5: Save
- Click the green check mark once satisfied.
- Click the eye icon to see your page in real time:
- Click Save to apply all your changes:
That’s it! You can now make rounded Button corners.
Related articles:
