Archived topic
Gutenberg Image Cover Block Rounded Corners
7 replies · Started by Sean on January 12, 2021
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;
}Hi,
Can you specify which block/s on the page are you trying to add border-radius on? Screenshots will help.
Let us know.
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.
Thanks.
You can try this CSS:
.wp-block-cover-image.has-background-dim {
border-radius: 10px;
overflow: hidden;
}Still no dice unfortunately, still won't round it out for some reason.
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
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.
No problem. Glad you got it sorted. :D
