When displaying SharePoint images in the ShortPoint Slideshows Design Element, the default form it takes is a box. You can make the images display with rounded corners by utilizing the Custom CSS feature.

This is how the default Slideshows Design Element appears:

The steps we will provide below will allow you to make rounded corners like this example:

TABLE OF CONTENTS

• Prerequisite
• Step 1: Insert or Edit a ShortPoint Slideshows design element
• Step 2: Copy and paste code in Custom CSS
• Step 3: Preview and Insert/Update Slideshow

Prerequisite:

CSS customizations were added as a feature since ShortPoint SPFx version 5.2.2.28 or higher. Visit our Download ShortPoint page to get the latest version of ShortPoint.

Step 1: Insert or Edit a ShortPoint Slideshows Design Element

We begin by inserting the Slideshows Design Element into your SharePoint page. Go to edit mode and click the insert plus button to open Page Builder and select Slideshows.

For Modern SharePoint pages:

For Classic SharePoint pages:

You have the option to add your images and their details, including links and descriptions, one by one in the Items tab.

Or you can use ShortPoint Connect to pull data from a list or library within your SharePoint tenancy or in other locations. Just go to the Connect tab and complete the connection requirements. Once connected, you can select what details you want to display on your Slideshows.

Note: If you are not familiar with ShortPoint Connect, please check out our Basic Tutorial article for more details.

If you already have a ShortPoint Slideshows Design Element in place and you want to implement rounded corners, simply go to edit mode and hit the Settings cog wheel in the existing Design Element.

Step 2: Copy and paste code in Custom CSS

We will be using a CSS customization to create the rounded corners in your slideshow. Copy the CSS code below:

.shortpoint-advanced-image-content, .shortpoint-slideshow-bg-color, .shortpoint-slideshow-content {
   border-radius: 20px;
}

Step 3: Preview and Insert/Update Slideshow

Hit the Preview button to see how the changes affect your content. When you arrive at your desired design, click Insert or Update. Press the ShortPoint Save button to view the slideshow element on your SharePoint page.

Your slideshow will now display with rounded corners just like our example.

We are done! Apply this option to more of your SharePoint pages that have slideshows.

Related articles:

• Custom CSS Tab for ShortPoint Design Elements
• How to Make Rounded Corners for ShortPoint Panel
• How to Make Rounded Corners for ShortPoint Tiles
• How to Make Rounded Corners for Button Design Element