[Resolved] Rounded corners in blog posts

[Jan]

I would like to have rounded corners on all the images, I’m adding to blog posts. The following code worked for a while, but it’s not working anymore.

Is there a new code I should use?

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

[Elvin]

Hi Jan,

That will work on blog post content images added through Gutenberg editor’s image block.

To clarify: With blog posts images, did you mean the post thumbnail images on the Blog index page and archive pages?

If yes, try adding this CSS:

.post-image {
    border-radius: 30px;
    overflow: hidden;
}

.post-image img {
    display: flex;
}

If it’s for the single post page’s featured image, try this CSS:

.featured-image {
    border-radius: 30px;
    overflow: hidden;
}

[Jan]

Thanks for your quick reply.

I mean the images I’m adding with the Gutenberg editor, not the images on the category pages or featured images. I used the code I mentioned above and it worked for a while, but then it stopped working.

[Ying]

Hi Jan,

Your original CSS looks good to me.

If it stopped working, there might be some CSS conflicts.

Can you link us to a post where we can see the image so we can check the code?

[Jan]

That’s the code I have in my CSS editor. The borders are working but not the border radius. Please find a blog post in the private area.

.wp-block-image img {
border: 1px solid #CCC;
}
.no-border img {
border: none;
}
.wp-block-image img {
border-radius: 10px;
}

[Leo]

Edit this:

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

To this:

.wp-block-image img {
    border-radius: 10px !important;
}

[Jan]

Thanks now it’s working!

[Leo]

No problem 🙂

[Author]

Posts