How can I round the edges of collection boxes on my website?

Store Design
1

please tell me how i can round the edges for the boxs in the attached image -

website - parisianbakers.com

round edges.JPG
round edges.JPG1322×771 145 KB

1 Like
2

Hi @ray77 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
.collection-collage__item-wrapper .collection-grid__item-overlay {
    border-radius: 50%;
}

AvadaCommerce_0-1646137808450.png
AvadaCommerce_0-1646137808450.png1221×836 190 KB

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

3 
.collection-grid__item-overlay.grid__image.lazyloaded {
    border-radius: 20px !important;
}

@ray77
Add this code in the bottom of the theme.scss or Theme.css file

4

@ray77
if helpful,
Like and accept our Solution.