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

Answer 2

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