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

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

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

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

Ответы

#outer {
   overflow:hidden
}

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