How can we help you today?

How to Make Rounded Corners for ShortPoint Tiles

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


default square corners

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


rounded corners


TABLE OF CONTENTS


Prerequisite


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:


Edit


Click the ShortPoint tag:


ShortPoint tag


Select the pencil icon:


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:

Tiles design element



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; }

Step 3: Edit the Tiles Design Element 


Click the Tiles tag:



Select the cogwheel icon:


Cogwheel icon


Step 4: Paste the Code


Click the next icon:


next icon


Navigate to the Custom CSS tab:


Custom CSS tab


Paste the code inside the Custom CSS field:


Custom CSS field


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


change border radius



Once done, click the green check mark:


green check mark


Step 5: Save

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


eye icon


Click Save to apply all your changes:


Save


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


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 57 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more