SummArg | Cursos y recursos para webmasters

17/03/2010

Bordes redondeados con CSS

La propiedad border-radius es una de las innovaciones de CSS3, que nos permite aplicar bordes redondeados a nuestros diseños web, sin tener que recurrir a imágenes. A partir de Firefox 3.0, Chrome y Safari 3.1, la propiedad será interpretada sin problemas. Los usuarios de Internet Explorer y Opera no verán los bordes redondeados, simplemente los verán cuadrados.

Además de eso, el problema radica en que para Firefox la propiedad debe ser nombrada como -moz-border-radius, y para Chrome y Safari será -webkit-border-radius. Además es conveniente también declararla con su nombre genérico pensando en el momento en que todos los navegadores lo puedan leer.

Hay una aplicación online que nos puede ser de ayuda para evitarnos escribir tres veces las cosas y podemos acceder a ella desde border-radius.com

Las esquinas pueden tener curvaturas simétricas o ser cada una definida por separado. Definir un valor para border radius, equivale a hacerlo para las cuatro esquinas correspondientes. También en una sola línea, podemos definir un valor distinto para cada esquina:

-moz-border-radius:10px 20px 30px 40px;

Sin embargo, podemos ser mas específicos todavía y declarar valores para el radio vertical y radio horizontal de cada curva.

-moz-border-radius-topleft: 30px 15px;

Interesante para hacer que nuestros sitios luzcan bien sin tener que cargar imagenes, no?

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: La propiedad border-radius es una de las innovaciones de CSS3, que nos permite aplicar bordes redondeados a nuestros diseños web, sin tener que recurrir a imágenes. A partir de Firefox 3.0, Chrome y Safari 3.1, la propiedad s…..

Dejar un comentario