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

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.