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):

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

Corners clip images as intended in my latest Chrome, Firefox, and Safari now: http://codepen.io/anon/pen/gzDmL — sam, Apr 29 '13 at 21:52

sam · Answer 1 · 2013-09-17T21:02:26.467

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}.

score 15 · Accepted Answer · answered Feb 25 '09 at 21:08

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).

answered Feb 25 '09 at 21:08

kyle

1,460
2
15
21

Yes, it seems like this works. It's unfortunate overflow doesn't work as it does with non-border-radius-styled divs. – Bret Walker Feb 26 '09 at 14:02
Related to background images and borders (especially non-opaque borders): MDN: https://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 (http://www.w3.org/TR/css3-background/#the-background-clip). – mwolfetech Aug 21 '12 at 14:09
Adding an image as a background changes the image semantic meaning and is loaded later by the browser. – kvetis Jul 26 '17 at 11:25

score 9 · Answer 3 · edited May 05 '12 at 17:44

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.

edited May 05 '12 at 17:44

Ry-

218,210
55
464
476

answered Feb 26 '09 at 00:29

Alex Barrett

16,175
3
52
51

I don't believe that border-radius has an effect on images in FF3 or Safari 4 (using -moz and -webkit prefixes). – Bret Walker Feb 26 '09 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 08 '12 at 15:34
I don't think it's by design. http://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 '12 at 18:50

score 3 · Answer 4 · answered Dec 29 '12 at 05:01

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;

answered Dec 29 '12 at 05:01

thomasrye

41
2

I like that. =] – giovannipds Nov 20 '19 at 21:28

score 1 · Answer 5 · edited Dec 27 '11 at 15:03

Try this workaround:

The image in img tag is present and there you set the width and height.
Then hide it with visibility:hidden. The width and height stay intact.
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;}

score 0 · Answer 6 · answered Jun 26 '13 at 19:17

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>

score 0 · Answer 7 · answered Feb 25 '09 at 21:12

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.

answered Feb 25 '09 at 21:12

Illandril

656
4
11

score 0 · Answer 8 · answered Jan 31 '12 at 21:46

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>

answered Jan 31 '12 at 21:46

Nick

2,576
1
23
44

score 0 · Answer 9 · edited Aug 03 '21 at 20:02

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

edited Aug 03 '21 at 20:02

Ole Pannier

3,208
9
22
33

answered Feb 09 '12 at 11:44

Brad

275
1
4
9

score -2 · Answer 10 · answered Feb 25 '09 at 22:03

-2

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

answered Feb 25 '09 at 22:03

Barbaros Alp

6,405
8
47
61

How do I prevent an image from overflowing a rounded corner box?

10 Answers10

Linked