Si preguntamos a los desarrolladores si conocen la propiedad de las CSS3 border­radius, es casi seguro que el 99% de los profesionales digan que sí. Lo que nos explicarán será más o menos lo que en DesarrolloWeb.com ya analizamos en el artículo Bordes redondeados en CSS 3, pero hay mucho más que conocer a raíz de ese atributo y vamos a intentar resumirlo en las siguientes líneas.

Los usos avanzados son tan variados como la imaginación nos pueda permitir y pasan desde la creación de formas hasta la incorporación de sombras o animación para hacer efectos más especiales. En este artículo aprenderás más sobre la propiedad CSS3 border­radius y te enseñaremos a crear contenedores con formas de diversos tipos.

Antes de comenzar "ahora es el momento de usar border­radius"

Actualmente, el total de los navegadores modernos acepta border­radius sin necesidad de usar prefijos CSS, por lo que es un buen momento para incorporarlo en nuestro día a día, para cualquier tipo de web.

Solo navegadores antiguos como Internet Explorer 8 o anteriores carecen de soporte para esta propiedad. Podemos especificar estilos alternativos para estos navegadores antiguos, pero ya es hora de dejar preocuparnos por que los sitios web no se vean igual en navegadores obsoletos. Hay que entender sus limitaciones y hacérselas entender a los usuarios y clientes.

A continuación veremos usos muy interesantes que están contemplados en la especificación de border­radius para CSS3 y que podemos usar para hacer formas. Algunos son más útiles y otros son meramente curiosidades.

Puedes ver una página con los ejemplos que vamos a ver en funcionamiento.

Especificar radio del borde para cada una de las esquinas por separado

Debemos comentar como primer uso la posibilidad de especificar un radio para el borde de manera independiente en cada una de las cuatro esquinas: arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda.

border­radius: 10px 50px 20px 100px;

Es importante saber aquí que si un valor del border­radius para una esquina es tan grande que no se tenga espacio para diseñar todo ese tamaño de radio, todos los bordes se escalan para conseguir que sean proporcionales.

border­radius: 10px 50px 2000px 100px;

Si le colocamos ese border­radius en un contenedor de tamaño 1000px, teniendo en cuenta que hay un border­radius para la esquina inferior derecha de 2000px (mucho mayor de lo que permitiría el contenedor), experimentaremos que todas las esquinas pierden radio en el borde, para que sean proporcionales sus radios a la medida mayor que no se puede representar, sin que ninguna traspase las medidas de lo posible.

También podemos especificar los bordes de manera separada con atributos como "border­top­left­radius" o similares, útiles cuando no queremos dimensionar el radio de más de una esquina o queremos sobreescribir uno de sus valores.

border­radius: 10px;
border­top­left­radius: 50px;

Formas circulares y derivadas

Otros usos interesantes, y en ocasiones impactantes del border­radius, son la creación de formas circulares, elipses, píldoras, etc. hasta otras más complejas con formas de semicírculos, cuartos de círculos, etc.

Para hacer una forma de círculo basta con tener dimensiones iguales en la altura y anchura de la caja y luego aplicarle un radio en el borde de un poquito más de la mitad del tamaño de su dimensión. O, tal como aprendimos en el anterior punto, que todos los radios para los bordes se escalan proporcionalmente si las dimensiones de la caja no son suficientes al radio que se quiere aplicar, bastaría con poner la misma dimensión que hemos utilizado en la altura y anchura.

width: 500px;
height: 500px;
border­radius: 500px;

Es sencillo jugar con estos valores para conseguir formas bastante interesantes. Una forma de píldora la conseguimos colocando la anchura o altura un poco mayor.

Un semicírculo se consigue aplicando el borde solo a unas de las esquinas.

width: 250px;
height: 500px;
border­radius: 0 500px 500px 0;

Pero ¿cómo conseguimos producir una elipse? Si simplemente hacemos que una de las dimensiones de la caja sea superior a la otra, obtendremos una forma de píldora y no de elipse.

width: 1000px;
height: 500px;
border­radius: 500px;

La solución rápida es usar porcentajes. Simplemente debemos aplicar una dimensión del 50% a la propiedad border radius, que independientemente de las dimensiones de la caja, siempre será la mitad de la altura o anchura. En este caso, si la capa tiene la misma anchura que altura, produciremos un círculo y si la capa tiene más anchura que altura, se obtendrá una elipse.

width: 1000px;
height: 500px;
border­radius: 50%;

Especificando dos valores distintos de radio por esquina

En cada una de las esquinas del elemento a las que aplicamos border­radius podemos asignar dos valores por separado, para el radio horizontal y radio vertical. En principio, si asignamos un único valor, tanto el radio horizontal como vertical es exactamente el mismo, consiguiendo esquinas redondeadas que tienen recorridos que se ajustarían a circunferencias.

Sin embargo, podemos asignar valores de manera separada para conseguir que el redondeo de las esquinas no sea exactamente circular, sino que tenga una curva elipsoide. Por ejemplo:

border­bottom­left­radius: 30px 100px;

El radio redondeado que se aplicará a la esquina inferior izquierda tendrá el recorrido de una elipse con radio horizontal de 30 píxeles y vertical de 100 píxeles.

Esta posibilidad de especificar dos radios por cada esquina la podemos implementar también cuando especificamos el border­radius de una vez, con el atributo border radius, en el que primero definimos todos los radios para cada esquina en la horizontal y luego todos los radios en la vertical, separados por "/", como se ve a continuación.

border­radius: 30px / 180px;

Esta nueva forma de definir el borde redondeado nos da pie a crear formas diferentes, como conseguir media elipse.

width: 800px;
height: 200px;
border­radius: 50% / 100% 100% 0 0;

O si somos todavía más imaginativos, podríamos construir un huevo, con dimensiones de anchura y altura y distintos radios en las esquinas, como se puede ver a continuación.

width: 300px;
height: 500px;
border­radius: 50% / 60% 60% 40% 40%;

Esperamos que estos conocimientos y prácticas te hayan resultado de utilidad y que puedas haber obtenido ideas para incorporar en tu diseño web. Ahora bien, posiblemente te hayas quedado con ganas de más y quieras saber cómo se solucionan algunos de los problemas que habrás podido apreciar durante esta práctica.

En el siguiente artículo te enseñaremos técnicas para conseguir que los textos se adapten a las formas que estás construyendo con CSS.