- This topic has 7 replies, 4 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
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;
}Customer Support
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; }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.
Customer Support
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?
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;
}Customer Support
Edit this:
.wp-block-image img { border-radius: 10px; }To this:
.wp-block-image img { border-radius: 10px !important; }Thanks now it’s working!
No problem 🙂
- You must be logged in to reply to this topic.
