Граничный радиус не влияет на внутренние элементы

У меня есть макет, где все содержимое страницы находится в коробке с закругленными углами. Это включает в себя название страницы и т.д. У меня есть элемент div, который содержит мое содержимое заголовка, div, содержащее основное содержимое страницы, и div, содержащую нижний колонтитул. Моя проблема такова: поскольку граница моего "заголовка" div не округлена, большой "контейнер" div, кажется, не округлен вверху. Я исследовал и показал, что это просто "заголовок" div, накладывающий себя поверх "контейнера" div. У меня есть пример здесь: http://jsfiddle.net/V98h7/.

Я попытался округлить границу "header" div до такой же степени, но это создает небольшой дефект на границе (он получает собственную границу, цвет фона заголовка div). Из отчаяния я также попытался установить z-индекс контейнера на большое количество. Это ничего не делало.

Я чувствую, что должно быть простое решение этой проблемы. Я не хочу исправления javascript. Я бы предпочел CSS, но LESS тоже в порядке.

Ответ 1

Вот скрипка - http://jsfiddle.net/ashwyn/V98h7/2/

Добавить -

#outer {
   overflow:hidden
}

и он будет работать.

Ответ 2

Используйте это:

#outer { overflow: hidden; }

или это:

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

Или вы можете попробовать это:

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

(Примечание: я не тестировал последний вариант выше).

Ответ 3

вот обновление jsfiddle

http://jsfiddle.net/V98h7/1/

Чтобы просто закруглить граничные углы border-radius, можно взять 4 значения TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

поэтому border-radius: 20px 20px 0 0; будет вокруг вашего внутреннего div сверху. Не забудьте использовать то же значение радиуса, что и родительский div, иначе вы увидите дополнительную границу.

Ответ 4

Попробуйте дать контейнеру div немного больший радиус границы (в верхних двух углах), чем заголовок div.