El radio del borde no afecta a los elementos internos.

Tengo un diseño donde todo el contenido de la página está en un cuadro con esquinas redondeadas. Esto incluye el título de la página, etc. Tengo un div elemento que contiene el contenido de mi encabezado, un div que contiene el contenido principal de la página, y un div que contiene el pie de página. Mi problema es este: Dado que el borde de mi “encabezado” div no es redondeado, el gran “contenedor” div parece no estar redondeado en la parte superior. He investigado y demostrado que esto es simplemente el “encabezado” div superponiéndose al “contenedor” div. Tengo un ejemplo aquí: http://jsfiddle.net/V98h7/.

He intentado redondear el borde del “encabezado” div en la misma medida, pero esto crea un pequeño defecto en el borde (gana un borde propio, del “header” divcolor de fondo de). Por desesperación, también intenté configurar el índice z del contenedor en un número grande. ESO no hizo nada.

Siento que debería haber una solución simple a este problema. No quiero una corrección de javascript. Preferiría CSS, pero LESS también está bien.

Aquí está el violín – http://jsfiddle.net/ashwyn/V98h7/2/

Agregar –

#outer {
   overflow: hidden;
}

y funcionará

Más información sobre el overflow la propiedad se puede encontrar en MDN.

Utilizar este:

#outer { overflow: hidden; }

o esto:

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

O tal vez puedas probar esto:

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

(Nota: no he probado la última opción anterior).

aquí está la actualización jsfiddle

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

Para redondear las esquinas de los bordes border-radius puede tomar 4 valores TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

asi que border-radius: 20px 20px 0 0; redondeará su div interno desde arriba. Recuerde usar el mismo valor de radio que el de la división principal; de lo contrario, verá un borde adicional.

Corrección de bordes para el sangrado del color de fondo del borde del radio de css y los elementos internos que rompen el radio del borde. Esto podría ayudar con las extrañas fallas en los bordes.

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

Esta referencia fue encontrada aquí http://css3porfavor.com/
por https://stackoverflow.com/a/7052769/9071880

Intente darle al div del contenedor un radio de borde ligeramente más grande (en las dos esquinas superiores) que el div del encabezado.