Esquinas redondeadas

CSS3 añade interesantes características en materia de bordes, como la posibilidad de crear bordes con esquinas redondeadas, característica que en versiones anteriores de CSS era muy complicado de lograr, necesitando recurrir al apoyo de imágenes gráficas. Por su parte, en CSS3 es realmente sencillo hacerlo mediante código.

Basta utilizar la propiedad border-radius, con la cual podrás especificar un radio para el borde de las esquinas. Por defecto, este borde es de tamaño 0, por lo que no hay borde redondeado. A medida que se aumenta este valor, el borde se redondea más. Una vez llegado a su máximo, no se apreciará ningún cambio.

Esquinas redondeadas en CSS

Hay varias formas de especificar el radio de las esquinas:

Propiedad Valor Significado
border-radius 1 parámetro. Aplica el radio a todas y cada una de las esquinas.
2 parámetros: top-left + bottom-right y a top-right + bottom-left.
3 parámetros: top-left, a top-right y bottom-left y a bottom-right.
4 parámetros. Orden de las agujas del reloj, empezando por top-left.

El primer formato, un único parámetro, aplica ese tamaño a todas las esquinas del borde.

El segundo formato, con dos parámetros, aplica el primer valor, e1, a las esquinas superior-izquierda e inferior-derecha, y el segundo valor, e2, a las esquinas superior-derecha e inferior-izquierda.

En el tercer formato, se aplica el parámetro e1 a la esquina superior-izquierda, el parámetro e2 a las esquinas superior-derecha e inferior-izquierda y el parámetro e3 a la esquina inferior-derecha.

Y por último, en el cuarto formato, se aplica el tamaño de cada valor a cada esquina por separado, en el sentido de las agujas del reloj. O lo que es lo mismo, e1 a la esquina superior-izquierda, e2 a la esquina superior-derecha, e3 a la esquina inferior-derecha y e4 a la esquina inferior-izquierda.

A modo de ejemplo teórico, pueden ver un ejemplo de la aplicación de varios formatos:

div {
  border-radius: 25px;              /* Formato con un parámetro */
  border-radius: 25% 50%;           /* Formato con dos parámetros */
  border-radius: 50px 25px 10px;    /* Formato con tres parámetros */
  border-radius: 25px 0 15px 50px;  /* Formato con cuatro parámetros */
}

Esquinas irregulares

Truco: Es posible diferenciar el radio horizontal del radio vertical de una esquina determinada, creando una esquina redondeada irregular.

Para conseguirlo, no hay más que añadir una barra (/) y repetir nuevamente el número de parámetros escogido. De esta forma, los parámetros a la izquierda de la barra representan el radio horizontal, mientras que los que están a la derecha, representan el radio vertical.

div {
  /* Usando el segundo formato */
  border-radius: 5px 50px / 50px 15px;
}

Esquinas específicas

De la misma forma que hemos visto con anterioridad en otras propiedades CSS similares, también es posible especificar los valores de cada esquina mediante propiedades por separado:

Propiedad Valor Significado
border-top-left-radius Indica un radio para redondear la esquina top-left.
border-top-right-radius Indica un radio para redondear la esquina top-right.
border-bottom-left-radius Indica un radio para redondear la esquina bottom-left.
border-bottom-right-radius Indica un radio para redondear la esquina bottom-right.

Estas propiedades son ideales para aplicar junto a la herencia de CSS y sobreescribir valores específicos.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.