CSS3 border-radius clipping issues

Question

I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->

I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":

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

However, upon digging up the working draft for CSS3 backgrounds and borders...

http://www.w3.org/TR/css3-background/#corner-clipping

...I couldn't help but notice the following description under the "corner clipping" section:

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

So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?

Answer 1

If you remove position: relative; on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.

Answer 2

It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack .

Answer 3

Just wanted to chime in on this one since I found this with a similar problem.

In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.

On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.

Tested in Chrome, Safari and Firefox on Mac.

Answer 4

I came here looking for an answer because I had a similar problem in Chrome 18.

I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.

What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:

<a>
    <div style="overflow:hidden; border-radius:15px; position:relative;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>

But if I moved the relative positioning up one parent element everything looked good:

<a style="position:relative;">
    <div style="overflow:hidden; border-radius:15px;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>