CSS Styling Not Applying to Image in Element

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