The ShortPoint Tiles Design Element does not have a border by default.

If you want to frame your Tiles with a neat border, follow the steps in this tutorial. Here is the result you will achieve at the end (these are the ShortPoint Tiles with a 5px grey border):

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Open the settings of the Tiles Design Element
  • Step 3: Copy and paste the custom CSS code
  • Step 4: Apply changes and hit Save

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You already inserted a Tiles Design Element that you want to customize on your SharePoint page.

Interactive Tutorial

Go through this interactive tutorial to learn how to add a border to the Tiles Design Element:

We used the following custom CSS in the tutorial.

.shortpoint-tile {
   border: 5px solid black !important;
}

You can increase the border width value in pixels and replace black with the color that you want to use.

Step-by-step Tutorial

Here are the detailed instructions to add borders to the Tiles Design Element:

Step 1: Edit the ShortPoint web part

• Edit your SharePoint page.

• Click the ShortPoint web part and enter edit mode by pressing the pencil icon.

Step 2: Open the settings of the Tiles Design Element

• Navigate to the Tiles Design Element on your page.
• Press the EasyPass tag to show the action buttons.
• Click the cogwheel icon to open the settings window.

Step 3: Copy and paste the custom CSS code

This is the custom CSS code that we will be applying to the Tiles Design Element to add the borders.

.shortpoint-tile {
   border: 5px solid black !important;
}

You can increase the border width value in pixels and replace black with the color that you want to use.

• Copy the custom CSS.
• In the settings window, switch to the Custom CSS tab.
• Paste the code into the space provided.

Step 4: Apply changes and hit Save

• Once complete, press the green checkmark button.
• You have the option to preview the page by hitting the eye icon on the Action toolbar.
• Finally, remember to Save your changes.

Now all your tiles will have neat borders. This trick works with all the Tiles Design Element styles.

Related articles:

• How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial)
• How to Make Rounded Corners for ShortPoint Tiles
• Introduction to ShortPoint Tiles Design Element
• How to Customize the Tiles Design Element in Live Mode