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

There is also now background-clip in css3. It works in all the major browsers. The options are border-box, padding-box and content-box. In your case, I think you'll want to use padding-box.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;