[Resolved] rounded corners of images

[Anders]

Hi
this was a struggle. I want rounded corners on an image. I have this css in the customizer:
/* rounded corners class assigned to generateblocks images */

.rounded-corners img {
border-radius: 12px;
}

and also this
/* rounded corners images */
.wp-block-image {
border-radius: 10px !important;
}

I tried both classes in the image block under “Advanced” but none of the works. Why?

[David]

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;
}

[Anders]

works! How come I need all that code?

[David]

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 🙂

[Anders]

OK I see, thanks!

[David]

You’re welcome

[Alan]

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

[Leo]

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

[Alan]

Hi Leo.

It’s on the 3 boxes here

Gold Coast Snake Catcher

[Leo]

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

[Alan]

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

[Elvin]

Hi there,

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

[Alan]

Thanks Elvin !

[Elvin]

No problem. 😀

[Henry]

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

[Author]

Posts