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.

Answer 1

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