How can we help you today?

How to Make Rounded Corners for Shortpoint Slideshows

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 slideshow appears on your SharePoint page:


Default view of Slideshow images is boxed


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


Sample of rounded corners for slideshows


TABLE OF CONTENTS


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 add a ShortPoint web part. Click the insert plus button to open Page Builder and select Slideshows.


For Modern SharePoint pages:


Insert ShortPoint web part, add Slideshows design element for Modern SharePoint


For Classic SharePoint pages:


Insert tab, click insert ShortPoint, and choose slideshows from Page Builder on Classic SharePoint


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


Add images and details in 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 slideshow.


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


Connect tab contains many connection types


If you already have a ShortPoint Slideshows in place and you want to implement rounded corners, simply go to edit mode and hit the Settings cogwheel in the existing design element.


Edit an existing ShortPoint slideshows and click on settings cogwheel


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:


border-radius: 10px;
overflow: hidden;
Note: If you want a more pronounced rounded corner, you can increase the value of the px (currently 10px) in the code.


Navigate to the Custom CSS tab and paste the copied code into the space provided.


Note: We have several articles about how to customize CSS for ShortPoint design elements in our Knowledge Base.


Go to custom css tab and paste the code


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.


This is how the preview will look like with rounded corners


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


Sample of rounded corners for slideshows


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


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 46 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