How to Prevent an Image from Overflowing a Rounded Corner Box

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

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

Trimming image corners with border-radius set on parent div doesn't work in Safari

The best way around this is by specifying overflow: hidden; on the parent element.

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

just add border radius in anchor tag too

<a style="border-radius:20%" > img </a>

How to make CSS3 rounded corners hide overflow in Chrome/Opera

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Thanks everyone who helped!

→ http://jsfiddle.net/5fwjp/

Should border-radius clip the content?

Is this the expected behavior?

Yes, as crazy as it sounds, it actually is. Here's why:

The default overflow for <div> elements (and most other things) is visible, and the spec says this about overflow: visible:

visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

In turn, §5.3 Corner clipping in the Backgrounds and Borders module says:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

The sentence that I've emphasized specifically mentions that the overflow value of the box must be something other than visible (that means auto, hidden, scroll and others) in order for the corners to clip its children.

If the box is defined to have visible overflow, which like I said is the default for most visual elements, then the content is not supposed to be clipped at all. And that's why the square corners of .buffer go over the rounded corners of .progressbar.

Consequently, the simplest way to get .buffer to clip within .progressbar's rounded corners is to add an overflow: hidden style to .progressbar, as shown in this updated fiddle.

Safari rounded corners fail to conceal with overflow hidden during animation

Change the thumb_overlay width to 153px, and add webkit definitions for border-bottom-left-radius and border-bottom-right-radius.

-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;

Fiddle.

CSS Border radius not trimming image on Webkit

Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.

Displaying an arbitrarily-sized image with rounded corners inside fixed-size block

Why don't you try this fiddle I made?

The idea is to use the background-size: cover; CSS property which handles the centering, cropping and, well, covering. Here's an extract from the fiddle:

div.yourWrapper {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url('some_image.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I have no idea how this downgrades in IE and seriously, supporting Opera is just wrong due to extremely low market adoption (but that's my personal opinion, you can start yelling at me now).

---

Related Topics