How to round edges of featured collection?

Store Design
,

Topic summary

A user seeks to round the edges of their featured collection section and adjust its width to make the rounded corners visible.

Initial Confusion:

  • The helper initially misunderstood, providing CSS code to round individual product card edges within the collection rather than the collection container itself.

Solution Provided:
After clarification, the helper supplied two CSS snippets:

  1. Rounded edges - Add border-radius: 50px; to the color scheme gradient class targeting the collection section
  2. Width adjustment - Use max-width: 90%; with margin: auto; on the specific Shopify section ID to decrease the collection width and center it

Implementation:

  • Navigate to Shopify admin → Online Store → Themes → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add the provided code snippets at the bottom
  • Adjust the border-radius and max-width values as desired

Outcome:
The issue was successfully resolved, with the user confirming the solution worked as intended.

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

Hi, I want to know how to round the edges of my featured collection just like the image below.
As a side-note I would need to adjust the width of the featured collection so the rounded edges are visible.

If anyone could help with this query I would be grateful. Thank-you for your time in advance.
Source - https://autoid.co/
Our page - https://rmtperformance.com/

RMTPerformance_0-1712853973279.png
RMTPerformance_0-1712853973279.png1760Ă—748 134 KB

RMTPerformance_1-1712854024834.png
RMTPerformance_1-1712854024834.png1919Ă—759 144 KB

1 Like
2

Hi @Reinhart

Do you mean like this?

Made4uoRibe_0-1712866847623.png
Made4uoRibe_0-1712866847623.png823Ă—703 189 KB

If it check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-card-wrapper .card {
    border-radius: 20px;
}
.card--card .card__inner .card__media {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

No sorry, I want to round the edges of the collection itself, not the products within the collection.

However this is a useful modification it’s not what I was looking for!

1 Like
4

Oh, sorry I didnt read it right. I just read it quickly. You mean the collection section. I a bit confuse.

Like this?

Made4uoRibe_0-1713042748680.png
Made4uoRibe_0-1713042748680.png1905Ă—783 183 KB

This is the code I used.

.color-scheme-0c53d9fa-367e-4d04-a7db-5b93dc8bedcc.isolate.gradient {
    border-radius: 50px;
}

And Save.

You can decrease/increase the size.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Awesome thanks for that, any idea how I decrease the width of the collection itself?

6

Yeah sure, only this featured collection right?

Same Instruction.

section#shopify-section-template--21139463143771__featured_collection_6kw4qH {
    max-width: 90%;
    margin: auto;
}

And Save.

You can decrease/increase the max-width in your liking.

Result:

Made4uoRibe_0-1713119623901.png
Made4uoRibe_0-1713119623901.png1904Ă—783 192 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

Absolute Legend Mate, Thank-you for your time!!!

1 Like