which class for rounded corners of images

Hey,

I use this for featured images on content templates:

.dynamic-featured-image.wp-post-image {
    border-radius: 10px 10px 10px 10px; /* top, right, bottom, left */
}

If you're not using templates and don't need to control the radii individually then maybe remove the .dynamic-featured-image class and only use one value:

.wp-post-image {
    border-radius: 10px;
}

I'm using this one for images within the content:

.wp-block-image {
    border-radius: 10px !important;
}

I've added a css comment in the first one which helps me to remember the order when I need to edit it. The override with !important on the in content snippet might not be needed, can't say for sure. Hope it helps!

Hi Anders,

Can you specific which images on your site do you plan to apply the rounded corners on?

Lilo's CSS, which uses .wp-post-image selector, applies to all image contents added using the image block but if you only want to apply it on specific images, you may have to add additional CSS classes to the specific image blocks and style it using that.

actually when I checked the custom css I found a class for rounded images, so that solved it. thanks!

Nice one. Glad you got it sorted. :)

I used this class
wp-block-image

Thanks for sharing with us.

And yes, using Chrome's devtool helps in identifying this. You can even do practice/test CSS with it.:D