Gutenberg allows extra CSS styles for an image.

I want to make the image a circle and I thought this CSS would work:

img.imgcircular {
-webkit-clip-path: circle(15.7% at 50% 50%);
clip-path: circle(15.7% at 50% 50%);
}

And the class on the image is "imgcircular"

Any ideas why it doesn't work?

Thanks

Gutenberg allows extra CSS styles for an image.

I want to make the image a circle and I thought this CSS would work:

img.imgcircular {
-webkit-clip-path: circle(15.7% at 50% 50%);
clip-path: circle(15.7% at 50% 50%);
}

And the class on the image is "imgcircular"

Any ideas why it doesn't work?

Thanks

• css
• block-editor

1 Answer 1

In your .css try to add the following :

.is-style-circle-mask img,
.is-style-rounded img {
-webkit-clip-path: circle(15.7% at 50% 50%);
 clip-path: circle(15.7% at 50% 50%);
}