Rounded corners en CSS3

Pau Sanchez — Wed, 17 Dec 2008 18:47:56 +0000

Que las esquinas redondeadas están soportadas por CSS3, es algo que sé desde hace tiempo, lo que no me había dado cuenta es que ya funcionan en algunos navegadores (incluso desde hace más de 1 año).

Según la especificación, debería bastar con definir “border-radius” a los pixeles deseados, lamentablemente los navegadores aún no soportan los atributos estándar

En cualquier caso, se pueden conseguir bordes redondeados tanto para mozilla, como para webkit, pero hay que usar “-moz-border-radius” para el primero, y “-webkit-border-radius” para el segundo.

Después de hacer algunas pruebas, he visto que tanto Firefox 2, como Firefox 3, Safari 3.1 y Chrome lo soportan, mientras que tanto Opera, como Internet Explorer (tanto IE6 como IE7) aún están rezagados (lo de Opera no me lo esperaba… aiss).

Este texto deberías verlo con los bordes redondeados tanto en FF como en Safari.
Si te fijas, no hay javascript, sólo he usado:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Lo que fastidia es que no se pueda hacer fácil con IE. ¿Que os parece el tema de las esquinas redondedas?

Codigo Manso » esquinas redondeadas

Rounded corners en CSS3