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.