How can I style my collection images to be curved at the top?

Store Design

Topic summary

Goal: Make collection images display with a curved/rounded top in the Shopify Dawn theme.

Key solution:

  • Use CSS border-radius to round only the top corners of the collection cards. One suggestion: border-top-left-radius and border-top-right-radius (e.g., 25px), adjustable to taste.
  • Final implemented approach: Edit Online Store > Theme > Edit code > Assets > base.css and add:
    .collection-card-wrapper .card { border-radius: 300px 300px 0 0; overflow: hidden; }
    This rounds the top-left and top-right corners while keeping the bottom corners square; overflow: hidden ensures the image is clipped to the curved shape.

Outcome:

  • The original poster confirmed the fix worked. Another participant noted it was helpful.

Status: Resolved. No remaining open questions.

Notes:

  • border-radius is the CSS property that controls corner rounding; values can be adjusted to change the curve depth.
Summarized with AI on January 12. AI used: gpt-5.
1

Hello, I would like to have my collection images curved at the top. The images are currently saved curved but I want them to be styled so that, when you upload a collection image it formats it so its curved like this.

I am using the Dawn theme - thanks in advance.

https://daydreamerluxe.myshopify.com/

password: beautybossmedia

Sammiejojojo_0-1666806573279.png
Sammiejojojo_0-1666806573279.png1920Ɨ1080 364 KB

1 Like
2

Hello there

If you find the correct file, and add the css it should look something like this for the collection id

border-top-left-radius: 25px;
  border-top-right-radius: 25px;

note you can adjust the 25 to be whatever curve you want, this is an example

Hope this helps

3

Hi :blush: yes I saw that I could do this, but Iā€™m not sure which part of the code to add it to

4

@Sammiejojojo

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.collection-card-wrapper .card {
    border-radius: 300px 300px 0 0;
    overflow: hidden;
}

After Code view

KetanKumar_0-1666833330983.png
KetanKumar_0-1666833330983.png1898Ɨ942 254 KB

2 Likes
5

You are an angel thankyou!

1 Like
6

This was helpful!!

1 Like
7

@Sammiejojojo
its my pleasure to help us if you want any more help please let me know

8

@jdimari4
its my pleasure to help us if you want any more help please let me know