How to add corner radius in a collection

Store Design
,

Topic summary

A user seeks to add corner radius (rounded corners) to a collection section on their Shopify store using the Prestige theme.

Solutions Provided:
Multiple respondents offered similar CSS-based solutions:

  • Navigate to Shopify Admin → Online Store → Themes → Edit code
  • Locate the base.css, theme.css, or styles.css file
  • Add CSS code targeting .content-over-media or .content-over-media--auto with border-radius values ranging from 10px to 25px
  • Save the file

Current Status:
The original poster confirmed the solution worked initially. However, a new issue emerged: the border-radius CSS is unintentionally affecting their slideshow element as well, which they want to exclude from the styling. The discussion remains open as this secondary problem needs resolution.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

How can I add corner radius for this section?

Website: https://prettycious.com/

Theme: Prestige

Screenshot 2024-05-18 195353.png
Screenshot 2024-05-18 195353.png1912×857 201 KB

1 Like
2

Hi @memahmudhassan ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_1-1716041373621.png
BSSTechVenture_1-1716041373621.png1902×899 133 KB

Step 2: Search file base.css, theme.css or styles.css

BSSTechVenture_2-1716041382736.png
BSSTechVenture_2-1716041382736.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.content-over-media.content-over-media--auto {
    border-radius: 10px !important;
}

Here is result:

BSSTechVenture_0-1716041290902.png
BSSTechVenture_0-1716041290902.png1911×865 209 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you :heart_eyes:

3

Hi @memahmudhassan

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/theme.css, and paste the code provided below at the end of the file.

.content-over-media {
border-radius: 25px;
}

devcoders_0-1716041514629.png
devcoders_0-1716041514629.png1334×550 273 KB

1 Like
4

Hello @memahmudhassan

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css or style.css

Step 3: Add code

.content-over-media--auto {
    border-radius: 20px !important;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

5

Thanks brother. It’s worked!

1 Like
6

Hi @memahmudhassan

Great to hear that the issue has been resolved! If you need any further assistance, feel free to reach out.

7

Brother, to applying this, facing a issue, when applying it’s also working for my slideshow which I don’t want!