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

If you make the image a background image instead of contents, the image won't clip the rounded corners (at least in FF3).

You could also add a padding to the div, or margin for the image to add extra padding between the rounded border and the image.