CSS Styling Not Applying to Image in Element

[Krystal]

Hi there!

I’m trying to apply a border radius to an image I’ve added in an element but I can’t seem to get the CSS to apply. I’ve cleared the cache and deactivated all plugins except GPremium but it’s still not working.

I’ve entered this in my element:

<div class="home-banner">
<img src="http://localhost/2019-template-3/wp-content/uploads/2019/10/banner.jpg" alt="Home Banner">
</div>

and this in my style.css:

.home-banner {
    border-radius: 20px;
}

I can see that the CSS is applied when I inspect the element in my browser but the corners are still square. Am I missing something totally obvious here? The site is in local development if that makes any difference, though I can’t see that being the cause. Any help at all is appreciated!

Krystal

[David]

Hi there,

try including the overflow: hidden; property in your .home-banner CSS

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Krystal]

That did the trick! Thank you!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts