Почему граница обрезается при использовании border-radius?

Question

Пожалуйста, посмотрите эту скрипку:

Пример jsfiddle

обратите внимание, что заголовки обрезают границы границ, есть идеи почему?

Answer 1

Градиенты .pod-header s перекрывают скругленные углы на .pod s, потому что вы не округлили .pod-header s.Они не наследуют закругленные углы от своих родительских элементов.

Чтобы исправить это, закруглите верхние углы (только) ваших .pod-header элементов, используя этот CSS:

    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;

Answer 2

Вы даете одному классу радиус границы, а внутреннему классу фон, но не радиус (поэтому он все еще имеет квадратный угол).

Проверьте CSS в обновленной скрипке

Answer 3

Вам также нужно установить радиус границы на внутреннем элементе.

Например, используйте это:

#pod-container .pod .pod-header {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
    border-radius: 6px;

    border-bottom: 1px solid #CCC;
}