[Resolved] Gutenberg Image Cover Block Rounded Corners

[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;
}

[Elvin]

Hi,

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

Let us know.

[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.

[Elvin]

Thanks.

You can try this CSS:

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

[Sean]

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

[Elvin]

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

[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.

[Elvin]

No problem. Glad you got it sorted. 😀

[Author]

Posts