47

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?

1

10 Answers 10

38

My latest Chrome, Firefox, and Safari clip the image to the container's border-radius (as intended).

http://jsfiddle.net/RQYnA/12/embedded/result/

In Firefox 15, I see the image clipped when the container has {overflow: hidden}. (Clipping of child content seems to have been added in Gecko 2.0.)

In Chrome 23 & Safari 5, I see the image clipped only when the container has {position: static; overflow: hidden} and the image has {position: static}.

15

This may or may not work in your situation, but consider making the image a CSS background. In FF3, the following works just fine:

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

I'm not sure there's another workaround — if you apply a border to the image itself (say, 1em deep), you get the same problem of square corners.

Edit: although, in the "adding a border to the image" case, the image inset is correct, it's just that the image isn't flush with the div element. To check out the results, add style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" to the img tag (with width and height set appropriately, if necessary).

3
  • Yes, it seems like this works. It's unfortunate overflow doesn't work as it does with non-border-radius-styled divs. Feb 26, 2009 at 14:02
  • Related to background images and borders (especially non-opaque borders): MDN: developer.mozilla.org/en-US/docs/CSS/background-clip which notes: "Internet Explorer 7, but not other versions of Internet Explorer,behaves like background-clip:padding if overflow: hidden | auto | scroll." The w3c CSS backgrounds and Borders Candidate Recommendation Spec (w3.org/TR/css3-background/#the-background-clip).
    – mwolfetech
    Aug 21, 2012 at 14:09
  • Adding an image as a background changes the image semantic meaning and is loaded later by the browser.
    – kvetis
    Jul 26, 2017 at 11:25
9

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.

3
  • I don't believe that border-radius has an effect on images in FF3 or Safari 4 (using -moz and -webkit prefixes). Feb 26, 2009 at 13:48
  • 2
    this also doesn't work when the image is bigger than the div, which is the sort of situation that would lead you to WANT to clip the image in the first place. If this is by design, it seems like bad design to me. Or is there some hidden benefit to having the clipping fail?
    – iconoclast
    May 8, 2012 at 15:34
  • I don't think it's by design. dev.w3.org/csswg/css3-background/#corner-clipping says "Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve."
    – sam
    Sep 20, 2012 at 18:50
3

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;
1
  • I like that. =] Nov 20, 2019 at 21:28
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.

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

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.

0

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>
0

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>
0

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

-2

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.