Border-radius doesn't affect inner elements

Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer {
   overflow: hidden;
}

and it will work.

More information on the overflow property can be found on MDN.

Use this:

#outer { overflow: hidden; }

or this:

#inner1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

Or you maybe can try this:

#outer div:first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

(Note: I haven't tested the last option above).

Related