Child elements bg color clips to parents border-radius

Question

Anyone know of a surefire way to force child elements to stay in the border-radius of their parents?

Here is a js fiddle sample I'm working with: http://jsfiddle.net/fuego/qCNRZ/

Markup:

<div id="outer">
    <div id="inner">
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
    </div>
</div>

CSS:

#outer {
    width: 300px;
    background: red;
    border-radius:20px;

}

#inner {
    background:blue;
}

I simply want the container to appear blue now, but with the parents rounded edges. I updated the fiddle to reflect.

Sure thing: http://cl.ly/463s090Q412P1u0t2s0t The only place the border-radius is set, is on outer, inner is just fitting snuggly into it. I don't want to have to explicitly set extra border radius to match on inner. It clips! — Fuego DeBassi, Oct 19 '11 at 17:53
No. That is a side effect. I want the inner to clip to the ouster's border-radius. — Fuego DeBassi, Oct 19 '11 at 18:08

score 29 · Answer 1 · answered Sep 27 '12 at 14:06

29

Based on your example it would suffice to add overflow:hidden to your #outer element.

answered Sep 27 '12 at 14:06

Daan Mortier

1,868
1
13
9

3

This is the right answer. Without this property, the border radius of a parent is not supposed to clip its children's content by default: http://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content/8582304#8582304 – BoltClock Sep 27 '12 at 14:15

score 1 · Answer 2 · answered Nov 29 '14 at 08:15

1

Adding "overflow: hidden;" to the outer div will solve your problem. Cheers.

answered Nov 29 '14 at 08:15

Griffin

11
4

score 1 · Answer 3 · answered Oct 19 '11 at 18:01

The only way to achieve what you wish with pure css is to add border-radius for both div.

#outer {
    width: 300px;
    background: red;
    border-radius:20px;
    height:400px;
}

#inner {
    background:blue;
    border-radius:20px 20px 0 0;
    padding-left:10px;
}

Demo: http://jsfiddle.net/tZ8AL/1/

score -1 · Answer 4 · answered Oct 19 '11 at 17:46

-1

just needed margins set http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

answered Oct 19 '11 at 17:46

albert

8,112
3
47
63

Child elements bg color clips to parents border-radius

4 Answers4