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

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