CSS3: Bordes redondeados

Poco a poco iré publicando, entre otras cosas, artículos acerca de las novedades de CSS3. En este primer artículo nos centraremos en la propiedad border-radius.

La propiedad border-radius permite a los desarrolladores poner los bordes redondeados de manera muy simple, sin tener que depender de imágenes para las esquinas. Un ejemplo básico:

#ejemplo{
   border-radius: 10px;
}

Los bordes redondeados pueden ser creados independientemente usando las propiedades individuales border-*-*radius (border-bottom-left-radius por ejemplo) o las cuatro esquinas en conjunto usando border-radius.

Antes de ver como funciona border-radius, probaremos con las propiedades individuales:

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

La propiedad border-*-*-radius acepta uno o dos valores, expresados como medida o como porcentaje (respecto al contenedor padre).

Sintaxis:

border-*-*-radius: <length> | <%> ] [ <length> | <%> ]?

Ejemplos:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Cuando hay dos valores seguidos, estos se utilizan para definir, en orden, el radio horizontal y vertical de un cuarto de elipse que determina la curvatura de la esquina del borde.

Cuando solo hay un valor, este define ambos radios, horizontal y vertical, por igual.

El siguiente diagrama muestra algunos ejemplos de como debería mostrarse una esquina en diferentes casos:

Sin todos los valores son ’0′, la esquina será cuadrada, no redonda.

border-radius

La propiedad acortada border-radius puede ser usada para definir todas las esquinas simultaneamente. La propiedad acepta uno o dos conjuntos de valores, cada uno compuesto de uno a cuatro longitudes o porcentajes.

Sintaxis:
<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Ejemplos:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

El primer conjunto de (1-4) valores definen los radios horizontal para las cuatro esquinas. El segundo conjunto es opcional y va precedid0 por una ’/', define el radio vertical de las cuatro esquinas. Si sólo se inserta un conjunto de valores, estos se utilizan para determinar el radio tanto vertical como horizontal.

Para cada conjunto de valores se aplica lo siguiente:

Si se insertan los cuatro valores, estos corresponden a la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda respectivamente. Si la parte inferior izquierda se omite, es la misma que la parte superior derecha, si la parte inferior derecha se omite, es la misma que la parte superior izquierda y si sólo se inserta un valor, este define todos los radios.

Para más información, puedes ver la especificación de la W3C sobre fondos y bordes: Backgrounds and Borders Specification.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>