Esquinas redondeadas en Parent DIV no afectando Child DIVs

Question

Por lo tanto, estoy experimentando con el uso de esquinas redondeadas en CSS3 (no en IE, no importa si funciona allí), y tengo el DIV donde todo mi contenido vive luciendo bastante bien. El problema que tengo es que hay DIVs infantiles que no se "enmascaran" con las esquinas redondeadas de los padres. No estoy buscando que el niño herede las esquinas redondeadas. Solo quiero que el contenido dentro del padre no sea visible donde se redondea, como si estuviera enmascarado. Intenté usar "overflow: hidden;" pero eso no parece ser el truco.

¿Alguien tiene alguna idea de cómo los niños del contenedor DIV de esquinas redondeadas pueden ser ocultados por el DIV padre? Si es de alguna utilidad, estoy usando "position: absolute;" en el padre DIV. No estoy seguro si eso hará alguna diferencia.

Gracias!

Answer 1

Utilice relleno en el div. Si hace que el relleno sea igual al radio, no debería tener que preocuparse por la superposición o por el contenido que aparece en las áreas redondeadas.

<style> 
.round{ 
border-radius:10px; 
padding:10px; 
background-color:red; 
} 
</style> 

<div class="round">Rounded Corners</div> 

Aquí es un sitio útil que habla todo sobre el CSS3 Border Radio: http://www.css3.info/preview/rounded-border/.

Answer 2

Intente agregar overflow: hidden; al elemento primario. Esto solucionó el problema para mí.