[Resolved] Add CSS for border-radius to all images on website

[Erman]

Hi,

As stated in the topic title, I’d like to add a border-radius to all images on my site.

Is this possible to do with a general snippet of CSS or would I have to add it to different elements?

For the time being, I only have images in my one and only blog post, but I’d like to have images on all pages, for example as featured images for my blog post grid on the home page.

Thank you!

[Leo]

Hi there,

We might have to target few different elements but give this CSS a shot first:

.wp-block-image img {
    border-radius: 20px !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Please link us to the specific page or example in question in the border radius is not applied to some of the images.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erman]

Thank you, Leo!

I tried that snippet of code before. However, it doesn’t change the bottom border of the two images that are in the gallery block in the URL that I’ve linked.

Also, the border-radius on the last image of the post doesn’t get the same radius as the other images. At least not by the looks of it.

What could be causing this?

[David]

Hi there,

it is working, but its very hard to see as the Caption has a gradient behind it.
Add this CSS to remove that, and a little text shadow instead.

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: unset;
    text-shadow: 1px 1px 2px black;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erman]

Hi again David,

That did work. Thank you so much for that!

But I can’t figure out why the CSS won’t apply to the last image in my post. From what I can see, it shares the same class as the other images.

I’m sorry for plaguing you with what must be super basic CSS. But I’ve fiddled with it all day and I just can’t figure out what classes to adjust CSS to.

Thank you once again for being so helpful and patient with me.

[Leo]

Are you referring to the gif file?

The code is indeed working but just not as obvious.

If you change it to border-radius: 20px !important; then you should see it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erman]

Oh, yea! I meant the GIF. Sorry for being unclear about that.

Thank you for the help!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts