Need Help With Rounding Product Image Edges

Store Design
, , , , ,
1

Would like to round of the edges of my images on my collection product grids, I don’t know how to do it and rounding them one by one takes too long because I have 300+ products.

yert1.png
yert1.png999×401 403 KB

Would like them to be rounded like this:

yert2.jpg
yert2.jpg557×483 44 KB

Someone told me to try this

img {
border-radius: 10px;
} ​

But it didn’t work.

wesbite: SaleStylist.com

@KetanKumar
@PageFly-Victor

@PageFly-Richard

2

hi @luvopps

This is PageFly - Free Landing Page Builder.

You can add this code into the theme.css file

.grid__image-ratio {
border-radius: 10px !important;
}

This is how its look : https://prnt.sc/EOmrOnYR3N2T

Hope this can help you solve the issue

Best regards,

PageFly

3

I also Have the hover option on the grid image where it changes to the second product image when hovering over it, how do I make that round too.

4

hi @luvopps please update the code to be like this

.grid-product__secondary-image , .grid__image-ratio {
border-radius: 10px !important;
}