css3 border-radius – inside es cuadrado en Chrome + Safari?

Es más fácil describir este problema con imágenes. Cómo debe verse (funciona en Firefox):

Firefox

En Chrome y Safari, los interiores del borde son cuadrados por alguna razón:

cromo

Aquí está mi CSS:

.header { width: 850px; margin-left: auto; margin-right: auto; background-color: #F7F7F7; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px 40px 40px 40px; border: 20px solid rgba(255,255,255,0.1); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; margin-top: 20px; } 

¿Algunas ideas?

EDITAR – aquí está una jfiddle de ella: jsfiddle.net/oliverw92/pJgyu/11262/

Si quita el alfa del borde, funciona. Como probablemente no quiera hacer eso, puede usar dos elementos nesteds. Ejemplo aquí .

Es un error conocido de Webkit y Opera: https://bugs.webkit.org/show_bug.cgi?id=23166

Hasta que no se arregle, su única forma de evitarlo es usar 2 elementos, me temo …

Creo que este es el comportamiento normal de Webkit al recortar en el relleno de la caja. El relleno es cuadrado, es decir, no está definido por las curvas del borde, por lo que el color de fondo se superpone a partes del borde.

Pruebe esto en su lugar (a través de un SPAN nested dentro de su DIV):

 CSS: body { background-color: #999; } .header { width: 400px; margin-left: auto; margin-right: auto; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px 40px 40px 40px; border: 20px solid rgba(255,255,255,0.1); margin-top: 20px; height: 85px; font-weight: 100; font-size: 70px; vertical-align: middle; text-align: center; } .header span { background-color: #F7F7F7; display: inline-block; width:100%; border-radius: 20px 20px; } HTML: 
DataLog

Nota al margen: Aparte de su código, no me molesté en agregar todos los prefijos del vendedor; Te lo dejo a ti.

O simplemente puede usar una sombra de caja y ajustar el margen superior. Mi ejemplo solo incluye las versiones de -web-kit

 .header { width: 400px; margin-left: auto; margin-right: auto; background-color: #F7F7F7; -webkit-border-radius: 40px; -webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10); margin-top: 40px; height: 85px; font-weight: 100; font-size: 70px; vertical-align: middle; text-align: center; } 

Aquí hay un JSFiddle similar a su primer ejemplo usando solo su div original

He estado experimentando un problema similar. Resultó que debido a que el contenedor dentro del contenedor que he agregado con el radio del borde tiene un color de fondo, cubre el interior del borde.

Para rectificar esto, he agregado un radio de borde al objeto hijo así como también lo hace parecer igual.