Problemas de recorte de radio de borde CSS3

Question

Tengo un div con radio de borde establecido en algún valor (digamos 10px), y un div anidado que tiene el ancho y la altura completos de su elemento primario.

<!-- ... --> 
<style type="text/css"> 
div.parent { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 10px; 
    background: #0000ff; 
    overflow: hidden; 
} 
div.inner { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ff0000; 
} 
</style> 
<!-- ... --> 
<div class="parent"> 
    <div class="inner"></div> 
</div> 
<!-- ... --> 

me di cuenta de que el padre no recorta el niño alrededor de las esquinas redondeadas, a pesar de desbordamiento está configurado como oculto. Otro hilo StackOverflow indica que este comportamiento es "de diseño":

How do I prevent an image from overflowing a rounded corner box with CSS3?

Sin embargo, al desenterrar el borrador de trabajo para los fondos CSS3 y fronteras ...

http://www.w3.org/TR/css3-background/#corner-clipping

... No pude evitar fijarme en la siguiente descripción debajo del sección "esquina recorte":

Otros efectos que clip al borde frontera o material de relleno (tales como ‘overflow’ distinto de ‘visible’) también debe recortar a la curva. El contenido de los elementos reemplazados siempre se recorta a la arista contenido

Entonces, ¿qué me falta? ¿Se supone que el contenido debe estar recortado en las esquinas? ¿Estoy buscando información desactualizada? ¿Lo estoy haciendo mal?

Answer 1

No es por diseño, hay un outstanding defect in Firefox acerca de esto. Debería funcionar bien en cualquier navegador WebKit. En Firefox, también debes agregar un radio de borde al elemento contenido, o use some sort of hack.

Answer 2

Si quita position: relative; en ambos elementos, el elemento exterior sujeta al niño alrededor de las esquinas redondeadas. No estoy seguro de por qué, y si es un error.

Answer 3

Yo he venido aquí en busca de una respuesta porque tenía un problema similar en Chrome 18.

yo estaba tratando de tener una caja redondeada con dos elementos dentro de ella - título y el número de índice - con número de índice con posición absoluta en la esquina inferior izquierda de la caja.

Lo que noté fue si tuviera el código HTML de esta manera, el elemento de título sería sangrar fuera de las esquinas redondeadas (frontera de radio) a pesar de desbordamiento fue configurado como oculto en el elemento padre:

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Pero si me movía la posición relativa de hasta un elemento padre todo se veía bien:

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Answer 4

Sólo quería meter su cuchara en este caso ya que encontré esto con un problema similar.

En un div con su conjunto de desbordamiento para desplazarse, el radio del borde no recortó el contenido mientras se desplazaba a menos que el contenido se desplazara a la parte superior o inferior absoluta. Incluso entonces, el recorte solo reaparecía a veces si también desplazaba el documento hacia arriba o hacia abajo.

En una alondra agregué un borde transparente al elemento y eso pareció forzar el recorte en las esquinas. Como ya tenía algo de espacio alrededor del elemento, lo corté por la mitad y apliqué el resto al grosor del borde. No es ideal, pero terminé con el resultado que quería.

Probado en Chrome, Safari y Firefox en Mac.