[Resolved] How Do I Make Featured Images Have Rounded Corners?

[Robin]

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

[David]

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.

[Robin]

Wonderful. That worked. Many thanks, David.

[David]

Glad to be of help

[Author]

Posts