How do I prevent an image from overflowing a rounded corner box with CSS3?

Question

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?

Answer 1

If you make the image a background image instead of contents, the image won't clip the rounded corners (at least in FF3).

You could also add a padding to the div, or margin for the image to add extra padding between the rounded border and the image.

Answer 2

You need to specify an exact width and heigth with overflow:hidden, if you want your div to clip your image

Answer 3

Even when overflow is set to hidden, border-radius does not clip it's content. This is by design.

One solution would be to set border-radius on the image as well as its container.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

Another way would be to set the image as the background of the container using background-image; but there are issues with this method in Firefox before version 3 (see this bug) - not that that need bother you too much.