[Resolved] GenerateBlocks Pro Images with rounded corners

[Henry]

I am trying to add rounded corners to an image in a container. I’ve tried adding a radius to the container. I also tried adding CSS code in Image panel from 2 other threads about the same topic:

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

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

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

None of these work. WHen I click on the rounded image icon I get the image as a circle. The CSS has no impact no matter what the settings in the images panel.

[David]

Hi there,

1. In Customizer > Additional CSS add this:

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

2. In the editor select the Image Block, go to Advanced > Additional CSS Class(es) and remove anything you have in there and just add: rounded-corners

[Henry]

That worked, thanks. If I wanted to have several different rounded corner radius classes could I just add more classes to Additional CSS like:

.wp-block-image.rounded-corners20, .wp-block-image.rounded-corners30, etc ? (with different radius specified)

[David]

Yeah, so you would add more CSS rules to your CSS one for each new class eg.

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

.wp-block-image.rounded-corners20 {
    border-radius: 20px;
}

.wp-block-image.rounded-corners30 {
    border-radius: 30px;
}

And then simply add the CSS selector to the Advanced > Additional CSS Class(es) field eg. rounded-corners20

[Henry]

Perfect. Thanks.

[David]

Glad to be of help!

[Author]

Posts