[Resolved] Add border radius to Gutenberg Image Block images

[Brent Wilson]

How can I add a border radius to images added via the standard Gutenberg Image Block?

In the block settings, I added image-radius as an additional css class.

I tried adding this css in the customizer:

.image-radius {
		border-radius: 3px;
}

And also tried this css:

.image-radius img {
		border-radius: 3px;
}

What might I be doing wrong?

[Ying]

Hi Brent,

Your CSS is correct. it’s just been overriding by the default WP image block’s CSS.

Try this CSS instead to be more specific:

body .wp-block-image:not(.is-style-rounded).image-radius img {
    border-radius: 3px;
}

[Brent Wilson]

Thanks! That worked! Would adding !important to my original css be another way to override the default block css?

[Ying]

I think so 🙂

[Brent Wilson]

Thanks

[Ying]

No problem 🙂

[Author]

Posts