tags:

views:

1849

answers:

4

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?

+6  A: 
kyle
Yes, it seems like this works. It's unfortunate overflow doesn't work as it does with non-border-radius-styled divs.
AlexWalker
A: 

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.

Illandril
A: 

You need to specify an exact width and heigth with overflow:hidden, if you want your div to clip your image

Barbaros Alp
+2  A: 

Even when overflow is set to hidden, border-radius does not clip it's 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.

Alex Barrett
I don't believe that border-radius has an effect on images in FF3 or Safari 4 (using -moz and -webkit prefixes).
AlexWalker