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):

&l         


        

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}.