Дочерние элементы bg цветные клипы для родителя border-radius

Question

Кто-нибудь знает надежный способ заставить дочерние элементы оставаться в радиусе границы своих родителей?

Вот пример js fiddle, с которым я работаю: http://jsfiddle.net/fuego/qCNRZ/

Разметка:

<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;
}

Я просто хочу, чтобы контейнер теперь выглядел синим, но с родительскими закругленными краями.Я обновил скрипку, чтобы отразить.

Answer 1

На основании вашего примера было бы достаточно добавить overflow:hidden к вашему #outer элементу.

Answer 2

Единственный способ достичь того, что вы хотите с помощью чистого CSS, это добавить border-radius для обоих div.

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

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

Демо: http://jsfiddle.net/tZ8AL/1/

Answer 3

Добавление переполнения: скрыто;к внешнему div решит вашу проблему.Приветствия.

Answer 4

набор необходимых полей http://jsfiddle.net/jalbertbowdenii/83Xrs/2/