How to Make Rounded Corners for ShortPoint Tiles

By default, the ShortPoint Tiles Design Element has square corners:

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

TABLE OF CONTENTS

• Prerequisite
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the code
  • Step 3: Edit the Tiles Design Element 
  • Step 4: Paste the Code
  • Step 5: Save

Prerequisite

• 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 Tiles Design Element on your page.

Step-by-step Tutorial

Follow the detailed guide below to learn how to make rounded Tile 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 code

NOTEBefore proceeding, make sure you already have the Tiles Design Element on your page. Check out How to Customize the Tiles Design Element to learn how to insert it into your page:

Copy the code that corresponds to the background of your Tiles:

• If you are using color as a background:

.shortpoint-tile-bg-color { border-radius: 10px;}.shortpoint-tile-content { border-radius: 10px;}

• if you are using an image as a background:

.shortpoint-tile-bg-image{ border-radius: 10px;}.shortpoint-tile-content { border-radius: 10px;}

NOTEIf you are using the Flip style in Tiles, the CSS code above will not work. Use this one instead:

.shortpoint-tile-bg:before, .shortpoint-tile-bg-color { border-radius: 10px; }

Click the Tiles tag:

Select the cogwheel icon:

Step 4: Paste the Code

Click the next icon:

Navigate to the Custom CSS tab:

Paste the code inside the Custom CSS field:

(Optional) Adjust the border-radius values according to your preferences:

Once done, click the green check mark:

Step 5: Save

Click the eye icon to see your page in real-time:

Click Save to apply all your changes:

That’s it! You now have rounded Tiles corners. Enjoy trying it out on your SharePoint pages.

Related articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
• How to Change the Font on Tiles Elements
• How to Change the Icon Size in Tiles
• How to Change Grey Text Background in ShortPoint Tiles
• How to Create a Border for Tiles
• How to Disable the Default Tiles Animation
• How to Make the Tiles Display Regular Font Instead of Bold
• How to Make Tiles Black and White, and Colorful on Hover
• How to Resize an Individual Tile