[Resolved] Gutenberg Image Cover Block Rounded Corners

Home Forums Support [Resolved] Gutenberg Image Cover Block Rounded Corners

Home Forums Support Gutenberg Image Cover Block Rounded Corners

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1616498
    Sean

    I’m attempting to have the cover images have rounded corners, and have color or gradient overlays. My novice self is struggling to accomplish this via CSS. I tried a ton of variations of the below, I feel like I’m close.. what am I missing here? I’ve tried .wp-block-cover-image.has-background-dim, .wp-block-cover-image, overlay, etc.. im just not cracking this lol.

    .wp-block-cover-image.has-background-dim {
    	border-radius: 10px;
    }
    #1616527
    Elvin
    Staff
    Customer Support

    Hi,

    Can you specify which block/s on the page are you trying to add border-radius on? Screenshots will help.

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1617842
    Sean

    I provided a link in the private info, you’ll see two cover block images on there, one with a dog and one with iPhones with the word technology typed over it. Both have a color overlay.

    #1617845
    Elvin
    Staff
    Customer Support

    Thanks.

    You can try this CSS:

    .wp-block-cover-image.has-background-dim {
        border-radius: 10px;
        overflow: hidden;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1617855
    Sean

    Still no dice unfortunately, still won’t round it out for some reason.

    #1617865
    Elvin
    Staff
    Customer Support

    Ah my bad I made a typo:

    The selector being used was wrong. Instead of .wp-block-cover-image, it should be .wp-block-cover.

    .wp-block-cover.has-background-dim {
        border-radius: 15px;
        overflow: hidden;
    }

    Here’s how it’d look like: https://share.getcloudapp.com/d5uPqJ02

    A wise man once said:
    "Have you cleared your cache?"

    #1619826
    Sean

    that’s it, very good. I think I actually tried this on my own without the overflow line. agh, I knew I was somewhat close. much appreciated! it looks great.

    #1622846
    Elvin
    Staff
    Customer Support

    No problem. Glad you got it sorted. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.