How to add corner radius to all product images on the Dawn Theme

Store Design
,

Topic summary

Goal: apply rounded corners (“corner radius”) to all product images in the Shopify Dawn theme. The built-in setting (Customize > Settings gear > Media > Corner radius) was already at 18px but did not affect product media, notably in the featured products section.

Suggestions included using the theme’s Media corner radius, with the caveat it may not work if custom code is present. Requests for examples/URL were made to diagnose further.

Outcome: the issue was resolved via custom CSS added to product collections. CSS used: .card__media { border-radius: 5px; } which produced the desired rounded look on product cards.

Assets central to the thread: an image showing the desired appearance and the CSS snippet above. A live site link was shared (no password) with a mature content warning.

Status: resolved. No further action requested, though help was offered for any future updates.

Notes: “Dawn” is Shopify’s default theme; “product media” refers to product images/cards. Theme settings may not affect certain sections or may be overridden by customizations.

Summarized with AI on December 17. AI used: gpt-5.
1

Hey there!

I’m having difficulties with adding corner radius across all my product images. It seems that the solutions currently available don’t work anymore, or at least on the Dawn theme.

I would appreciate if anybody helped :slightly_smiling_face:

1 Like
2

Hi @havedolls

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

Find the theme that you want to edit and click on “Customize”.

Click the gear icon on your left hand side to open the settings
Go to Media, under the Corner radius, change the 0 to number that you want.
Click SAVE

This solution should work unless you have custom codes

3

@havedolls - do have an example of how do you want this corner radius?

4

Hello @havedolls
Please send me your store URL and password, so I can check it and update you.

5

Hey @Made4uo-Ribe !

Thank you so much for your effort in trying to help me! Unfortunately, the solution you suggested didn’t work for me. The default corner radius was already set to 18px, and changing it didn’t seem to affect the product media - at least not on the featured products section.

Regarding custom codes, I did modify the store’s code once, but I’m not sure if that’s even considered custom code.

The good news is that I found a solution! After playing around with the custom CSS, I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

Thanks again for reaching out and offering your help :slightly_smiling_face:

6

Hey @suyash1 !

Thank you for your effort in trying to help me! I wanted the products to look like this:

border_radius_products.png
border_radius_products.png1827×1028 139 KB

But it’s fine, because I already found a solution. After playing around with the custom CSS, I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

Thanks again for reaching out and offering your help :slightly_smiling_face:

1 Like
7

Hey @devcoders !

I already found the solution, but thanks for trying to help me in the first place!

I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

If you’re interested in seeing how the products look now, you can check out my site here (there’s no password): Click here to view site

*Please be advised that the site contains mature content

8

@havedolls - nice to know that your problems have been solved, do let me know if you need any updates later.