Problem
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?
Problem courtesy of: Bret Walker
Solution
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).
Solution courtesy of: kyle
