Redondear esquinas con CSS

Si estás empezando a dedicarte al desarrollo de páginas web, y en especial a la maquetación, es probable que en algún momento tengas la necesidad de redondear las esquinas de un elemento. Esto es algo que se utiliza de manera bastante común en imágenes y botones a la hora de diseñar. Por este motivo he pensado que podría ser útil ver cómo podemos hacerlo con CSS y las posibilidades que nos ofrece esta posibilidad.

Propiedad border-radius

Desde CSS3, para redondear las esquinas de un elemento disponemos de la propiedad border-radius. Si bien en su sintaxis verás que lleva la palabra border, esta propiedad en realidad actúa sobre todo el fondo del elemento con independencia de que le hayamos definido un borde o no.

border-radius: 50px;

Si la usamos del modo anterior, el elemento a la que se haya aplicado, redondeará todas sus esquinas mediante la intersección de un círculo cuyo radio es de 50px. Además de píxeles podemos utilizar otras unidades de medida como porcentajes (%) o unidades relativas (em y rem), esto es especialmente útil para adaptaciones en base al tamaño de la pantalla.

No obstante, esta propiedad es mucho más versátil y también nos permite redondear cada esquina por separado de manera individual, definiendo radios diferentes e incluso combinando esquinas redondeadas con esquinas normales. En su modo abreviado, los valores se introducen en sentido de las agujas del reloj como costumbre desde la esquina superior izquierda.

border-radius: 50% 0 50px 25em;

Pero también podemos ir un poco más allá con border-radius y generar esquinas con curvas más complejas, lo que nos dará pie a generar poder generar formas. Se nos permite controlar también el radio horizontal y vertical de cada esquina, separando los valores con / respectivamente.

border-radius: 100% / 50%;

El ejemplo anterior generaría unas esquinas basadas en elipses en lugar de círculos. A partir de aquí, podemos moldear cada esquina a nuestro criterio también de manera individual. Toda una serie de combinaciones que cubrirá la mayoría de las necesidades que tengamos.

Puede que parezca una propiedad simple, pero cuando comencé a trabajar en el sector no existía, por lo que el único modo de incluirlo en la maquetación de una web era hacerlo a través de una imagen. Como diseñador web freelance, poder redondear las esquinas de los elementos con CSS me permite dar mucha más versatilidad a los diseños que elaboro.