radio de frontera Webkit veces surte efecto

Question

Este problema es acerca de la propiedad de CSS3 border-radius (http://www.css3.info/border-radius-apple-vs-mozilla/)

Un ejemplo de este problema es aquí:

http://jamtodaycdn.appspot.com/bin/rounded.html

En este URL, he redondeado divs que parecen estar redondeados en FF3, pero en Safari y Chrome las esquinas redondeadas no están allí.

El estilo es el siguiente:

-moz-border-radius-bottomleft:2px; 
-moz-border-radius-bottomright:92px; 
-moz-border-radius-topleft:92px; 
-moz-border-radius-topright:2px; 
-webkit-border-bottom-left-radius: 2px; 
-webkit-border-bottom-right-radius: 92px; 
-webkit-border-top-left-radius: 92px; 
-webkit-border-top-right-radius: 2px; 

Estoy bastante seguro de que este CSS tiene el formato correcto, así que estoy desorientado en cuanto a cuál es el problema.

Answer 1

El problema parece estar en la radiación 92px. Parece que el radio máximo que puede manejar el div de 20 píxeles es 18 px. No es necesariamente obvio qué significa un radio de 92 píxeles en ese caso. Sin embargo, puede especificar tanto una X y el radio Y el uso de algo como esto:.

-webkit-border-bottom-right-radius: 92px 18px; 

(nota al margen, no debería utilizar el mismo ID de múltiples elementos HTML que puedes usar en lugar de clase, y ajustar su CSS selector por lo que dice .round en lugar de #round.)

Answer 2

¿No necesita aplicar una propiedad de borde o ancho de borde así como también las diversas propiedades de radio de borde?

Además, he notado que Safari deja caer el radio por encima de ciertos valores de radio; intente reducir los valores de píxel & vea lo que sucede.

Answer 3

Para cualquiera que se refiera a esto en busca de ayuda con las esquinas redondeadas, estoy de acuerdo con la respuesta de Jacob con respecto a Webkit, pero la pregunta también menciona que Chrome no funciona. Chrome usa esquinas redondeadas estándar CSS3 que son exactamente como Webkit, pero sin el '-webkit-' anterior en la regla. Estos son los siguientes:

border-bottom-right-radius:2px; 

Para tener en cuenta Firefox, WebKit y Chrome, que había necesidad de hacer algo como esto:

-moz-border-radius-topright:3px; 
-moz-border-radius-bottomright:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-bottom-right-radius:3px; 
border-top-right-radius:3px; 
border-bottom-right-radius:3px; 

El tercer conjunto de reglas son las reglas CSS3 y están soportados por Chrome. Esta es una buena manera de conseguir también esquinas redondeadas en IE usando algo como CSS3Pie: Tipo http://css3pie.com/

Answer 4

sencilla sólo tiene que utilizar:

border-radius:92px 92px 2px 2px;

donde:

border-radius:top right bottom left;