html - How do I prevent an image from overflowing a rounded corner box?

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

My latest Chrome, Firefox, and Safari clip the image to the container's border-radius (as intended).

http://jsfiddle.net/RQYnA/12/embedded/result/

In Firefox 15, I see the image clipped when the container has {overflow: hidden}. (Clipping of child content seems to have been added in Gecko 2.0.)

In Chrome 23 & Safari 5, I see the image clipped only when the container has {position: static; overflow: hidden} and the image has {position: static}.