Site logo

Archived topic

How Do I Make Featured Images Have Rounded Corners?

3 replies · Started by RJ on August 26, 2019

Viewing posts 1–4 of 4

Hey there - I've managed to make my featured images have a shadow/blur edge using this CSS:

.page-header-image-single { 
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

How do I make them have rounded edges of around 5px like these ones have (created in Elementor), see:
https://www.eatweeds.co.uk/plants

TIA, Robin

Hi there,

try updating your CSS to this:

.page-header-image-single {
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 5px;
    overflow: hidden;
}

the overflow: hidden is required from some browsers as the image can peak out of the corners.

Wonderful. That worked. Many thanks, David.

Glad to be of help

This archived topic is closed to new replies.