CSS3 cuadros con esquinas redondeadas

Tutorial para la creación de recuadros con esquinas redondeadas

Border-radius: create rounded corners with CSS

La propiedad CSS3 border-radius te permite crear esquinas redondeadas en cualquier tipo de caja de un modo muy sencillo sin necesidad de utilizar imágenes de fondo o de esquina y múltiples etiquetas divs para el diseño.

Desde la creación de la propiedad border-radius en el 2005, se ha ido extendiendo a todos los navegadores web aunque con algunas diferencias entre ellos (como siempre) de tal modo que necesitarás conocer las diferencias para cada uno.

Te pongo un ejemplo básico:

Esta caja debería aparecer con esquinas redondeadas con Firefox, Safari/Chrome, Opera e IE9.

El código que se ha usado para el ejemplo es, en teoría, muy sencillo:

#example1 {
 border-radius: 15px;
 }

El siguiente ejemplo lleva el prefijo  -moz- de Firefox (lee la sección de navegadores de este artículo para más detalle):

#example1 {
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

¿Cómo funciona?

Las esquinas redondeadas se pueden crear de modo independiente utilizando las cuatro propiedades border-*-radius que definen cada esquina del recuadro (border-bottom-left-radius, border-top-left-radius, etc.) o definir las cuatro de modo simultáneo usando sólo la propiedad border-radius.

Ahora vamos con la sintaxis de la definición por esquina border-*-radius antes de echar un ojo a cómo funciona la propiedad general border-radius.

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

Las propiedades border-*-radius permiten el uso de uno o dos valores expresados como un valor de tamaño o porcentaje (% según las dimensiones de la caja).

La sintaxis:
border-*-*-radius: </strong>[ <var><length></var> | <var><%></var> ] [ <var><length></var> | <var><%></var> ]?
Ejemplos:
border-top-left-radius: 10px 5px;
 border-bottom-right-radius: 10% 5%;
 border-top-right-radius: 10px;

Los dos valores sirven para definir, por orden, el radio horizontal y el radio vertical de una elipse cuadrada, lo que determina la curvatura de la esquina del borde exterior.

Si sólo se escribe un valor, se toma ese valor para ambos radios.

A continuación tienes un diagrama con algunos ejemplos y diferentes valores de radio:

esquinas-redondeadas-css3

Diferentes radios de esquinas en recuadros

Si alguno de los valores es igual a cero, la esquina será cuadrada, no redondeada.

border-radius

La propiedad border-radius se utiliza para definir las cuatro esquinas al mismo tiempo. Acepta uno o dos conjuntos con uno a cuatro valores que pueden 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 calores (1-4) define el radio de las cuatro esquinas. El segundo conjunto, opcional, precedido por un “/”, define el radio vertical de las cuatro esquinas. Si sólo se indica un conjunto de valores, se usará éste para determinar tanto el radio horizontal como el vertical.

Para cada conjunto de valores:

Si se indican los cuatro valores, estos representan: top-left, top-right, bottom-right y bottom-left respectivamente. Si omites bottom-left, se toma el valor de top-right; si omites bottom-right, se usa el de top-left; si se indica un sólo valor, entonces se aplica a todos los radios.

Navegadores

Todas las versiones actualizadas de Opera (10.5 y superiores), Safari (a partir de la versión 5), Chrome (desde la versión 5) y Firefox (última versión), soportan el uso de border-*-radius y border-radius tal y como se define bajo las especificaciones W3C sin necesidad de usar el prefijo -moz-prefix ni -webkit-prefix.

Incluso Internet Explorer a partir de su versión 9 parece funcionar correctamente con la definición de la W3C sin prefijos.

El prefijo -moz- prefix

Te explico de modo resumido el prefijo para crear cajas con bordes redondos bajo Mozilla de tal modo que puedas hacerlas compatibles con los navegadores obsoletos:

Estándar W3C Mozilla
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Las especificaciones para Mozilla son ligeramente diferentes y el comportamiento también cambia cuando se proporcionan valores en porcentajes. Te sugiero que le eches un ojo al centro de desarrollo de Mozilla:  Aquí.

Ejemplos en distintos navegadores:

Unos ejemplos básicos que deberían de funcionar con Firefox, Safari/Chrome, Opera e, incluso, IE9:

A
B
C
D
E
F

#Example_A {height: 65px;width:160px;-moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;}#Example_B {

height: 65px;

width:160px;

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

}

#Example_C {

height: 65px;

width:160px;

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

}

#Example_D {

height: 5em;

width: 12em;

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}

#Example_E {

height: 65px;

width:160px;

-moz-border-radius: 25px 10px / 10px 25px;

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

}

#Example_F {

height: 70px;

width: 70px;

-moz-border-radius: 35px;

border-radius: 35px;

}

Hasta aquí, todo explicado de un modo muy sencillo. Si quieres más información, puedes echar un vistazo a la web css3.info, que es de donde he sacado esta información. Está todo en inglés, pero no creo que te cueste demasiado implementar estas técnicas con un poco de entrenamiento y pruebas.

En un próximo artículo trataré el tema de las cajas con sombra, que también quedan muy bien en cualquier diseño web.

Esta información es pública y se puede compartir del mismo modo que todo lo que hay en esta web: http://creativecommons.org/licenses/by-nc-sa/3.0/