What code do I need to add to make the corners of the product pictures round

Shopify Discussion
1

I would like to make my product pictures round but unfortunately there is no option for this in the template that I use.

www.save4kids.co.il

2

Thank you for your fast reply! If you don’t mind I would love to ask you another question.

I have added the following code that I found on the forum to the right file:

.grid-product__image-mask {
border-radius: 30px !important;
}

.product-image-main .image-wrap {
border-radius: 30px;
}

.product__thumb-item .image-wrap {
border-radius: 30px;
}

.product__thumb-item a.is-active:before {
border-radius: 30px;
}

Now all the pictures are rounded just as I want them to be but there are 2 small issues that I did not manage to fix.

  1. The collection tiles are not rounded

  2. On the mobile, the picture is first shown squared and after a second changed to round corners

Could you help me out with these 2 issues? Thanks :slightly_smiling_face:

3

Unfortunately, it did not make any changes. To be clear, I am putting this code at the bottom of my assets > theme.css.liquid file.

Am I doing something wrong?

URL:

www.save4kids.co.il