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

StackOverflow https://stackoverflow.com/questions/587814

  •  06-09-2019
  •  | 
  •  

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?

Was it helpful?

Solution

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

OTHER TIPS

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

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.

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

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;

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.

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>

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

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>

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top