Border Radius Explicación
El border-radius le permite aplicar esquinas redondeadas a elementos HTML sin necesidad de utilizar las imágenes.
La sintaxis es bastante sencillo. La regla siguiente configurará el radio de las cuatro esquinas de un elemento con id "myDiv" para 5px:
Podemos especificar el radio de cada esquina individualmente así:
Esto hace que el radio de la esquina superior izquierda para ajustarse a 5px, la esquina superior derecha para ajustarse a 10px, la parte inferior derecha de 20px y la parte inferior izquierda de 15px.
En el momento de escribir sólo las últimas versiones de los navegadores más populares apoyan la border-radius propiedad. Sin embargo, las versiones anteriores de Mozilla y Webkit navegadores compatibles la propiedad a través de sus propias reglas prefijadas proveedores. Firefox 3 compatible reglas radio fronterizas a través de su "-moz-" como prefijo, mientras que los navegadores WebKit, como Safari y Chrome uso el "-webkit-" como prefijo.
Un gran porcentaje de usuarios siguen utilizando estos navegadores, por lo que para lograr esquinas redondeadas en el mayor número de navegadores posible, se debe utilizar el siguiente sintaxis:
El orden de estas reglas es importante. Definimos el WebKit y Mozilla reglas primero y luego el border-radius gobernar. Esto es para que cuando esta propiedad, finalmente se normaliza, los navegadores de apoyo a utilizar la norma definitiva en este juego y pasar por alto las reglas anteriores.
Esto puede parecer como que está estorbando su código innecesariamente, pero el beneficio vale la pena. Cuando se compara con otros métodos que requerir el navegador para descargar grandes imágenes de fondo se puede apreciar la elegancia de esta solución.
Si utiliza el generador de CSS3 arriba te darás cuenta de una ligera variaciones en la forma en que las normas funcionan para diferentes navegadores. por ejemplo Mozilla requiere la esquina inferior derecha a definirse así:
Mientras que para los navegadores webkit tiene que ser definido así:
Estas variaciones son difíciles de recordar, por lo que esta herramienta tan útil.
Soporte de Navegadores
| W3C Specification | Vendor Prefix | |
| Firefox 4 | Yes | - |
| Firefox 1-3 | - | Yes |
| Safari 5+ | Yes | - |
| Safari 3-4 | - | Yes |
| Chrome 5+ | Yes | - |
| Chrome 3-5 | - | Yes |
| IE9 | Yes | - |
| Opera 10.5+ | Yes | - |