aplicaciones Chrome CSS3 diseño firefox Gecko internet explorer opera Programacion Safari Webkit

Border-Radius: Bordes redondeados [IE, Chrome, Firefox]

by : Ricardo 11 years ago

Border-Radius es una propiedad que permite agregar bordes redondeados a un elemento de una página web, de acuerdo con al W3C, encargado de producir recomendaciones para la web.

En la actualidad es soportado por casi todos los navegadores web, como podemos apreciar en el siguiente enlace.

Sin embargo, las propiedades cambian de acuerdo al navegador. Por ejemplo si se utiliza webkit, utilizado en Chrome y Safari, se requiere de la siguiente propiedad en CSS:

-webkit-border-radius: 15px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;

Esto cambia si es que utilizamos Mozilla Firefox:

-moz-border-radius: 15px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;

Internet Explorer reconoce las siguientes líneas

border-radius: 15px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

Para aplicar estas propiedades con facilidad y probarlas en tiempo real, podemos utilizar Border-Radius, una aplicación web que permite editar las propiedades de borde en cada una de las cuatro esquinas de un elemento web y definir si las queremos para WebKit, Gecko o simple CSS3.

¿Qué les pareció la aplicación? ¿Conocen alguna similar para diseño web?

Link: Border-Radius

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.