Archived topic
Add border radius to Gutenberg Image Block images
5 replies · Started by Brent Wilson on September 2, 2021
Viewing posts 1–6 of 6
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?
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;
}Thanks! That worked! Would adding !important to my original css be another way to override the default block css?
I think so :)
Thanks
No problem :)
This archived topic is closed to new replies.
