Border radius to elements in Dawn theme 10.0.0

Technical Q&A
1

Could you guys help me figure out how to add border radius to product images, images in description, add to cart button and email subscription?

my shopify store is lifegud.in

thank you

1 Like
2

Hi @areybro ,

We can do this design but we need to put a border. So it would be visible. Like this:

Ribe_Dagandara_0-1690225202189.png
Ribe_Dagandara_0-1690225202189.png683Ă—414 142 KB

If it this one. let me know.

1 Like
3

okay but can the border have transparent color?

1 Like
4

Okay so you dont like to put the border.

Try this one. Its for the product.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.card__media img {
    border-radius: 20%;
}
.card__inner.color-background-2.gradient.ratio {
    border-radius: 20%;
}

Result:

Ribe_Dagandara_0-1690226024001.png
Ribe_Dagandara_0-1690226024001.png720Ă—452 106 KB

I hope it help.

5

yes it works but it doesnt work for the product page

1 Like
6

Yes that is only for collection pages.

This is for product pages.

Same Instruction.

.product__description.rte.quick-add-hidden img {
    border-radius: 20%;
}
slider-component#GalleryViewer-template--19846431047981__main img  {
    border-radius: 20%;
}
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    border-radius: 20%;
}

Result:

Ribe_Dagandara_0-1690236533861.png
Ribe_Dagandara_0-1690236533861.png1144Ă—598 322 KB

Im still trying to figuring out for the button. It a bit tricky.

1 Like