Bordes redondeados con CSS

Los bordes redondeados son otro recursos CSS que puedes usar para conseguir diseños diferentes para el aspecto de un <div> o contenedor de una página Web.

De hecho, resulta más fácil entender y visualizar un círculo que un cuadrado o cualquier otra forma.

Los filos requieren más herramientas neuronales por lo que el proceso mental se hace más lento.

Es decir, los elementos con bordes redondeados son más amables para el ojo o, como dice Lang, computacionalmente son más eficientes para el cerebro humano.

En este artículo vas a aprender como aplicar un borde redondeado a un elemento y la mayor parte de sus propiedades y te darás cuenta que, actualmente, no requiere mucho esfuerzo.

Te lo comento porque años atrás era más complicado ya que no había una propiedad clara y efectiva en todos los navegadores.

La propiedad CSS border-radius ha evolucionado y permite redondear las esquinas del borde exterior de un elemento con relativa facilidad.

Puedes establecer un solo radio para hacer esquinas circulares o dos radios para hacer esquinas elípticas.

¿Cómo redondear todas las esquinas?

Puedes redondear todas las esquinas de un elemento con la siguiente propiedad:

Source code

.box{
    border-radius: 10px;
}

De esta forma, estás indicando que las 4 esquinas de la caja van a tener una esquina redondeada de 10px.

Se vería así:

Redondeo diferente en cada esquina

A la propiedad border-radius se le puede aplicar 4 valores. Uno diferente para cada esquina:

Source code

.box {
    border-radius: 10px 20px 30px 40px;
}

Para obtener como resultado:

Bordes redondeados con valor porcentual

La unidad de medida puede ser cualquier unidad que se pueda usar en CSS.

Aquí vas a poder ver como trabajar con bordes redondeados con valores porcentuales.

Ejemplo 1:

Source code

.box {
    border-radius: 25% 10%;
}

En este caso, estoy definiendo un valor del 25% para la esquina superior izquierda y esquina inferior derecha.

Luego, un 10% par ala esquina superior derecha y la esquina inferior izquierda.

Visualmente puedes conseguir algo como lo que sigue:

Ejemplo 2:

Source code

.box {
    border-radius: 10% 30% 50% 70%;
}

Para obtener como resultado:

Propiedades específicas para esquina redondeada

Existen propiedades concretas para aplicar un borde a una esquina específicamente.

Borde redondeado en la esquina superior izquierda

Source code

.box {
    border-top-left-radius: 25px;
}

Para obtener:

Borde redondeado en la esquina superior derecha

Source code

.box {
    border-top-right-radius: 25px;
}

Para obtener:

Borde redondeado en la esquina inferior izquierda

Source code

.box {
    border-bottom-left-radius: 25px;
}

Para obtener:

Borde redondeado en la esquina inferior derecha

Source code

.box {
    border-bottom-right-radius: 25px;
}

Para obtener:

¿Cómo crear una bola o rotonda con CSS y los bordes redondeados?

Algo bastante interesante y que he utilizado bastante en varios proyectos es usar esta propiedad de bordes redondeados para crear una bola o redonda para mostrar un contenido.

Por ejemplo, mostrar una foto de un usuario dentro de una redonda se ve muy bien visualmente.

Pues, con CSS y los bordes redondeados es muy fácil crear una redonda.

Puedes añadir la siguiente propiedad en tu hoja de estilos:

Source code

.box {
    border-radius: 50%;
}

Para conseguir un resultado como el siguiente:

Para conseguir una redonda también tendrás que jugar con el ancho y el alto del elemento.

El elemento debe ser cuadrado. Esto significa que debe tener el mismo ancho y alto para conseguir el efecto redonda con border-radius.

Lo podrás ver en más detalle en el ejemplo en funcionamiento.

Ver demo Descargar

Conclusiones

Jugando con estos parámetros, puedes hacer infinidad de diseños para tus cajas o contenedores.

Que no se te olvide que puedes aplicarlo a cualquier elemento de tu página web: botones, enlaces, bloques de título, etc.

La imaginación es muy grande y te invito a que crees tus propios diseños y, si lo deseas, compártelos aquí para que la comunidad los conozca.

Y, ¿tu qué? ¿Usas mucho la propiedad border-radius en tus diseños?