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

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

Home Forums Support Add CSS for border-radius to all images on website

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2155946
    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!

    #2155983
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2156491
    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?

    #2156557
    David
    Staff
    Customer Support

    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;
    }
    #2157211
    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.

    #2157259
    Leo
    Staff
    Customer Support

    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.

    #2158368
    Erman

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

    Thank you for the help!

    #2158374
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.