[Resolved] rounded corners for pictures

[Sebastian]

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

[Sebastian]

Thanks

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Sebastian]

Hey, of course…

[Fernando]

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

[Sebastian]

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

[Fernando]

Try this:

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

[Sebastian]

Awesome, thanks a lot!

[Fernando]

You’re welcome Sebastian!

[Author]

Posts