Cómo crear formas avanzadas con border-radius

Si anteriormente nos aproximábamos a las funcionalidades de border-radius para crear bordes redondeados, ahora profundizamos un poco más. Con esta propiedad de CSS3, la imaginación es el límite a la hora de crear diferentes formas, añadir sombras o realizar incluso animaciones en cualquier página web. En este artículo, te queremos detallar cómo sacarle el máximo partido a este elemento, que nos resultará muy útil para incluir formas circulares en cualquier proyecto web directamente desde el código.

Te recordamos que, actualmente, todos los navegadores soportan border-­radius en sus últimas versiones, sin necesidad de usar prefijos CSS, por lo que si usas todavía navegadores como Internet Explorer 8 o anteriores, no podrás realizar lo que exponemos en este artículo, a no ser que utilices alternativas como las librerías Modernizr. A continuación, te mostraremos una serie de contenedores con diversos tipos de usos, algunos útiles y otros como curiosidades interesantes.

¿Cómo especificar el radio del borde?

Como primer uso, deberemos saber que podemos especificar un valor del radio para cada uno de las esquinas de manera independiente y con el siguiente orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda.

border­-radius: 12px 52px 22px 100px;

Ojo con poner un valor grande en uno de ellos porque el resto se escalarán para ser proporcionales.

border­-radius: 10px 60px 1500px 100px;

En el ejemplo anterior, vemos que si colocásemos en un contenedor de un tamaño de 1.000 pixeles una de las esquinas con un valor de 1.500px, observaríamos que estas pierden radio en el borde.

Con atributos como border-­top-­left-­radius, especificamos los bordes de manera independiente, útil cuando no queremos dimensionar el radio de más de una esquina o queremos sobreescribir uno de sus valores.

border­-radius: 12px; 
border­-top-­left­-radius: 60px; 

Formas circulares y variantes con border radius

Con border-­radius, es muy vistoso crear formas circulares, elipses, píldoras e incluso semicírculos, cuartos de círculos, etc.

Tan solo tenemos que disponer de unas dimensiones iguales en la altura y anchura de la caja y a continuación, aplicar un radio en el borde de algo más de la mitad del tamaño de su dimensión.

width: 450px; 
 height:450px; 
 border-­radius: 450px;

Podemos obtener un semicírculo adaptando el borde solo a unas de las esquinas.

width: 240px; 
 height: 490px; 
 border-­radius: 0 490px 490px 0;

Para la elipse tendremos que hacer que una de las dimensiones de la caja sea superior a la otra.

width: 1000px; 
 height: 450px; 
 border-­radius: 450px;

Usando porcentajes es una forma rápida para aplicar dimensiones. En el ejemplo siguiente, si la capa tiene la misma anchura que altura, obtendremos un círculo y si la capa tiene más anchura que altura, una elipse.

width: 1100px; 
 height: 510px; 
 border­-radius: 50%;

Especificando dos valores distintos de radio por esquina

Podemos asignar dos valores de forma separada para las esquinas del elemento a las que aplicamos border­-radius, una para el radio horizontal y otra para el vertical, consiguiendo de este modo, esquinas redondeadas que tienen recorridos que se ajustarían a circunferencias.

Pero también podemos conseguir una curva elipsoide asignando valores separados para que el redondeo no sea exactamente circular en sus esquinas. Algo como esto:

border-­bottom-­left-­radius: 32px 102px;

Tendrá el recorrido de una elipse que se aplicará a la esquina inferior izquierda con radio horizontal de 32 píxeles y vertical de 102 píxeles.

Podemos también utilizar border-radius para especificar dos radios por cada esquina separados por “/”, en el que primero definimos todos los radios para cada esquina en la horizontal y después, todos los radios en la vertical, de esta manera:

border­-radius: 40px / 170px;

Esto nos puede inspirar para crear distintas formas, por ejemplo media elipse:

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

Para crear la forma de un huevo, aplicaremos dimensiones de anchura y altura y distintos radios en las esquinas:

width: 320px; 
 height: 520px; 
 border-­radius: 50% / 60% 60% 40% 40%;

Sin duda, con práctica y mucho ensayo y error podremos dominar border-radius y aplicar numerosas ideas en nuestros diseños web.

Publicado el 29/08/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.