En un post anterior expliqué como hacer esquinas redondeadas sin muchos líos usando imágenes sin embargo usando CSS3 es mucho más sencillo y funciona en todos los navegadores modernos, esta demás decir que Internet Explorer no es moderno y por lo tanto sólo soporta este atributo en su versión 9.
Todas las esquinas iguales
Si queremos todas las esquinas redondeadas con el mismo efecto, nuestro código quedaría así para navegadores basados en Webkit(Safari, Chrome), Mozilla, Opera y también Internet Explorer 9:
[cc lang=»css»]
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
[/cc]
Bordes con distinta redondez
Podemos hacer que sólo algunos bordes sean redondeados o que tengan distinto tamaño
En navegadores basados en Webkit sería:
[cc lang=»css»]
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
[/cc]
Para firefox sería muy similar:
[cc lang=»css»]
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
[/cc]
[cc lang=»css»]
En Opera e IE9 sería
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
[/cc]
