Featured Image Rounded Corners

Hi Chris,

Could you please just open your style.css file from theme folder and go to the line 892 then replace with below css ? or just one property add can make your image corner round. border-radius: 35px;

.featured-image > img, .featured-image > a > img {
position: absolute;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 35px;
}

Hey Chris,

This CSS should do the trick:

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

You can paste that into the Custom CSS section in the Customizer.

Thank you both so much – that CSS did exactly what I hoped.
However, I seem to remember that a code modification added to Custom CSS actually rounded the entire post (as in, the top two corners of the featured image, and the bottom two corners of the post). Does that make sense?
Can I simply put this code in a different place to get that effect again?

Thanks so much for your quick replies!

Yea no problem ??

Try this CSS out for rounding the corners at the bottom of the post too:

.entry article {
  border-radius: 0 0 20px 20px;
}

Thanks so much again for the quick reply.
Check out https://www.chrismacleavy.com and you’ll see what I mean. The bottom corners of the featured image sit on the square corners of the post background. I’m hoping to round out the corners of the entire thing (featured image and post all together.

Does that make sense?

Totally, I missed that sorry ??

I’m going to post the complete CSS here you can copy and paste. I made a small update so that posts without Featured Images will still have all four corners rounded too.

.featured-image img {
  border-radius: 20px 20px 0 0;
}
.entry article {
  border-radius: 20px;
}
.entry.has-post-thumbnail article {
  border-radius: 0 0 20px 20px;
}

It’s a thing of beauty!!
Thank you so much!

No problem, happy to help ??