Внутренний элемент должен быть обрезан по радиусу границы внешнего элемента

Question

См. Здесь: http://jsfiddle.net/QSp2W/5/

Как видите, внутренний h1 имеет цвет фона, который перекрывает скругленные углы содержащего div.Это исправлено, если вы установите меньший радиус на внутреннем h1, но это хак.(Раскомментируйте прокомментированный CSS, чтобы понять, что я имею в виду.)

Версия 2 (на самом деле 23)

http://jsfiddle.net/QSp2W/23/, но я не знаю, как применить *селектор только для прямых детей, а не для внуков.

Answer 1

Добавление overflow: hidden к содержащему div эффективно заставляет фон делать то, что вы хотите, но, кажется, перезаписывает границу!Так что не совсем идеально ...:)

Answer 2

вы можете сделать это так http://jsfiddle.net/yuliantoadi/QSp2W/8/

Answer 3

Я бы дал H1 и p свойства CSS вместо div, как показано ниже. Вы можете создать класс только для границ и применить их к соответствующему элементу.

http://jsfiddle.net/QSp2W/7/

CSS:

div h1
{
    padding: 2px;
    background-color: #ff0000;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Below gets it close but not quite. */
    /*border-radius: 7px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
}

div p
{
    padding: 10px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Это с отдельным классом границы: http://jsfiddle.net/QSp2W/9/

Answer 4

Самый прямой способ - это div h1 наследовать от div.

Итак border-radius: inherit; вместо установки радиуса #.

http://jsfiddle.net/jasongennaro/QSp2W/10/