Esquinas redondeadas

La propiedad border-radius para redondear esquinas


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.

La idea es especificar un radio para el borde de las esquinas de la caja. 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

La propiedad border-radius

Para indicar este radio, utilizaremos la propiedad border-radius. Hay varias formas de utilizarla:

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.

Profundicemos un poco en estos cuatro formatos:

  • 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:

.element {
  border-radius: 25px;              /* 1 parámetro */
  border-radius: 25% 50%;           /* 2 parámetros */
  border-radius: 50px 25px 10px;    /* 3 parámetros */
  border-radius: 25px 0 15px 50px;  /* 4 parámetros */
}

Esquinas irregulares

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.

.element {
  border-radius: 25% / 50%;                                 /* 1 parámetro (x / y) */
  border-radius: 5px 50px / 50px 15px;                      /* 2 parámetros (x / y) */
  border-radius: 50px 25px 10px / 50px 75px 10px;           /* 3 parámetros (x / y) */
  border-radius: 5px 50px 5px 50px / 50px 15px 50px 15px;   /* 4 parámetros (x / y) */
}

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.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev