Problem

Jamie Munro
Jul 29, 2017 · 1 min read

If I use this code, the image isn’t clipped by the div’s rounded corners (resulting in the image’s square corners covering up the div’s rounded ones):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
<img src="big-image.jpg" />
</div>

Does anyone know how to get a rounded corder div to prevent a child image from overflowing?

Problem courtesy of: Bret Walker

Solution

This may or may not work in your situation, but consider making the image a CSS background. In FF3, the following works just fine:

<div style="
background-image: url(big-image.jpg);
border-radius: 1em;
height: 100px;
-moz-border-radius: 1em;
width: 100px;"
></div>

I’m not sure there’s another workaround — if you apply a border to the image itself (say, 1em deep), you get the same problem of square corners.

Edit: although, in the “adding a border to the image” case, the image inset is correct, it’s just that the image isn’t flush with the div element. To check out the results, add style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" to the img tag (with width and height set appropriately, if necessary).

Solution courtesy of: kyle

View additional discussion.

Jamie Munro

Written by

Author of 20 Recipes for Programming PhoneGap, 20 Recipes for Programming MVC 3, and Rapid Application Development with CakePHP.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade