Image Border Radius For All Images On Website

Store Design
, ,
1

Hi all!

I’m trying to get rounded corners on all of the images on our new website. I’ve added code to the CSS file inside the theme. Only the collection and product images have a corner radius of 15px. For some reason, the gallery and media with text images don’t want to change. Not even when you add the code to the specific section.

The used code is the one below. I’ve used it for other websites and worked fine then.

Anyone got any suggestions?

img {
  border-radius: 15px;
}
2 Likes
2

Make sure the images are using the image tag as well. If the answer from @stefansweb2020 doesn’t work you may be dealing with an SVG or you CSS may not be available globally to all elements. A URL would help us figure it out but generally speaking typically adding !important would do the trick.

1 Like
3

Hello @M1ka :waving_hand:

Try this code

img {
  border-radius: 15px !important;
}
4

hello @M1ka

You can add code by following these steps :

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css file

  3. Paste the below CSS

img {

border-radius: 20px !important;

}

5

Hi @beauxbreaux ,

Thank you for your prompt reply! The code below is working on, i.e., collection list. But not on galleries and media with text fields. Not even when I add it to the designated CSS field inside the section.

I am currently using showcase theme, used the code before and it worked fine then. This time however, there is no changes to the above mentioned sections. So I am a bit clueless right now.

6

Hi @ZenoPageBuilder ,

Appreciate the reply! Unfortunately the code only applies to collections etc. Galleries and Media with Text sections remain unchanged.

Got any idea what/why or how?

Thank you!

7

Hi @niraj_patel ,

Appreciate your reply too! Unfortunately the code only applies to collections etc. Galleries and Media with Text sections remain unchanged.

Got any idea what/why or how?

Thank you!

8

Hi @M1ka :waving_hand:

I guess the images on your site are actually background images, so the code didn’t work. If you don’t mind, you can send me your site URL here or in the inbox so I can check and give you another code. We do not charge any fee for helping people on the community, and do not use the url for other purposes, so feel free to share the url.

9

Hello @M1ka

you have to mention a parent div class with this CSS.
Example:

if parent div class name is collection then you have to add like this
.collection img{

border-radius: 20px !important;

}