How to Make Rounded Corners for the ShortPoint Slideshows Design Element

NOTEStarting ShortPoint SPFx version8.4.2.0 and above, the Slideshow Design Element already has the Roundness feature. This feature allows you to round the corners of the Slideshow. For more information, check out Introducing the Roundness Feature: What It Is and How To Use It.

By default, the Slideshow Design Element has rectangular corners:

This article will demonstrate how you can turn the Slideshow Design Element’s rectangular corners into rounded ones:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Copy the Custom CSS
  • Step 3: Paste the Custom CSS
  • Step 4: Save

Prerequisites

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

Interactive Tutorial

Before starting the tutorial, copy the Custom CSS below:

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

Step-by-step Tutorial

Follow along to learn how to make rounded Slideshow 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 Custom CSS

• Copy the Custom CSS below:

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

NOTEYou can change the border-radius number according to your preference.

Step 3: Paste the Custom CSS

NOTEBefore proceeding, ensure a Slideshow Design Element is on your page.

• Click the Slideshow tag.
• Select the cogwheel icon.
• Navigate to the Custom CSS tab.
• Paste the copied code in the field provided.
• Click the green checkmark.

Step 4: Save

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

• Click Save to apply your changes.

Congratulations! You now have rounded Slideshow corners.

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