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.

Answer 2

Even when overflow is set to hidden, border-radius does not clip its content. This is by design.

One solution would be to set border-radius on the image as well as its container.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

Another way would be to set the image as the background of the container using background-image; but there are issues with this method in Firefox before version 3 (see this bug) - not that that need bother you too much.

Answer 3

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.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#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;}

Answer 4

A simple border-radius on the img tag works fine in current versions of Safari 5, Chrome 16, Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

Answer 5

The extra cropping is usually only within the margin of error of the border thickness. Just let the inner radius be slightly smaller so that the margin of error falls under the border instead of next to is

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

Answer 6

I think this problem occurs when the image or the image's parent is position:absolute. This is understandable as setting absolute takes the element out of the flow of the document.

I'm 90% sure I've seen a fix for this, I'll update this post when I do:D