How to Round the Corners of SharePoint Web Parts

[data-sp-feature-tag="WebPartName"] {
border-radius: 20px;
overflow: hidden;
}

3. Go to your SharePoint page and add the ShortPoint Code Web Part.

4. Click the Edit Properties icon of the ShortPoint Code to edit it.

5. Delete all default codes

6. Paste the copied code in the Edit CSS field, customize the border-radius value, and click Save.

7. Disable the Contain CSS Style option.

8. Close the ShortPoint Code window.

9. Republish the page.

Step-by-step Tutorial

Follow the steps below to learn how to round the edges of SharePoint Web Parts. We will be using a CSS Code to accomplish this.

Step 1: Copy the Data SP Feature Tag

• Go to the SharePoint page you want to use and look for the SharePoint Web Part you want to round the edges. For this guide, we will use the Editor Card Web Part:

• Right-click the SharePoint Web Part and click Inspect:

• Find the data-sp-feature-tag and copy the value inside the quotation marks:

NOTETake note of the data-sp-feature-tag value. You will need this in Step 2.

Step 2: Copy the Code

• Copy the Custom CSS code below:

[data-sp-feature-tag="WebPartName"] { 
border-radius: 20px;
overflow: hidden;
}

• Replace the value inside the data-sp-feature-tag with the one you got from Step 1. You can use the code below as a reference:

[data-sp-feature-tag="EditorialCardWebPart web part (Editorial card)"] { 
border-radius: 20px;
overflow: hidden;

• Go to the SharePoint page where you have the SharePoint Web Part and click Edit:

• Click the close icon to leave the Toolbox:

• Select the plus icon near the SharePoint Web Part:

• Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:

Step 4: Edit the ShortPoint Code Web Part

• Click the Edit Properties icon:

Step 5: Delete Default Codes

• Select each field, delete the default codes, and click Save:

Step 6: Paste the Code

• Select the Edit CSS field:

• Paste the Code:

• Customize the border-radius value according to your preferences and click Save:

Step 7: Disable Contain CSS Style

• Scroll down and disable Contain CSS Style to ensure that the code works properly:

Step 8: Republish Page

• Once satisfied, click the close icon to leave the ShortPoint Code window:

• Click Republish once you’re ready to make your changes live:

Well done! You now have rounded SharePoint Web Part corners. Enjoy trying this Custom CSS on your SharePoint pages. If you need more ways to style your SharePoint pages, check out the tutorials below: