Site logo

Archived topic

rounded corners for pictures

8 replies · Started by Sebastian on September 22, 2022

Viewing posts 1–9 of 9

Hello,

I have created a header for blog posts. I have inserted a header here and below it the Gutenberg block "post image". I want this post image to have rounded corners. How can I configure this via CSS?

Thanks a lot

Thanks

Hey, of course...

Hi Sebastian,

You can try using a GB Image Block instead, and then through the Block settings, make the borders rounded by altering the border-radius: https://docs.generateblocks.com/article/image-overview/#border-radius

If you want to do it through code, add my-image to the class list of the Container Block holding the image, then add this CSS in Additional CSS:

.gb-container.my-image > .gb-inside-container figure img {
    border-radius: 135px;
}

The image unfortunately does not take on any effects or radius when set as Dynamic Data. The code does not work, too.

Try this:

.my-image img {
    border-radius: 20px;
}

Awesome, thanks a lot!

You're welcome Sebastian!

This archived topic is closed to new replies.