rounded corners of images

Hi there,

Try this:

1. Edit the Image Block - in Advanced > Additional CSS add: rounded-corners

2. Add this CSS:

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

works! How come I need all that code?

You can try just this CSS:

.wp-block-image.rounded-corners {
    border-radius: 10px;
}

I added the extra selectors as your cache plugin is subtly changing the order of the CSS .... and i wanted to make sure our custom CSS was more specific :)

OK I see, thanks!

You're welcome

Hi David

The first bit of code at #1816082 worked but the second one #1816448 won't.

When I'm adding the css in the block "advanced additional css classes" do I remove the existing part that says either is-style-default or is-style-rounded and replace it with rounded-corners

rounded-corners

or do I just add the extra class like this

is-style-default rounded-corners

Thanks

Can you link us to the page in question?

Feel free to open a new topic if want to use the private info field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hi Leo.

It’s on the 3 boxes here

Gold Coast Snake Catcher

Looks like it's all working for me?
https://www.screencast.com/t/tU2f76gMP52F

Thanks Leo. Can you please tell me which was the correct way of adding the css in the block “advanced additional css classes” .

Do I remove the existing part that says either is-style-default or is-style-rounded and replace it with rounded-corners

rounded-corners

or do I just add the extra class like this

is-style-default rounded-corners

It works both ways. I just want to know which is correct. At the moment I've just got

rounded-corners

in the additional css box

Thanks

Hi there,

If you're using David's CSS, you only need to add rounded-corners. You can ignore the rest. :)

Thanks Elvin !

No problem. :D

Using Generate Blocks Pro - I have an image inside a container and I'm trying to get rounded corners. If I click on the rounded image under styles I get a circle. I tried pasting both the versions of the above CSS code with the image set to default and tried rounded but it has no effect. I get either a circle or a square. I first tried setting border-radius in the container but that had no effect either.

The image is set to full size and the container to full width