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

Try this workaround:

1. The image in img tag is present and there you set the width and height.
2. Then hide it with visibility:hidden. The width and height stay intact.
3. After that you'll set the same source as background image an it will clipped.

  


#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}