CSS tiene interesantes características respecto a los bordes, como la posibilidad de crear bordes con esquinas redondeadas.
La idea es especificar un valor numérico (radio) para el borde de cada esquina de la caja. Por defecto, este borde es de tamaño 0 (sin redondear). A medida que se aumenta este valor, el borde se redondea más. Una vez llega a su máximo, no se apreciará ningún aumento en el redondeo.
En estos ejemplos interactivos, se pueden modificar todas las esquinas (primer ejemplo), o cada esquina por separado (segundo ejemplo). Veamos ahora como funcionan estas propiedades.
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 a todas y cada una de las esquinas ⛶ | |
border-radius | 2 parámetros: Diagonal principal ( ⌜ y ⌟ ) y diagonal inversa (⌝ y ⌞) | |
border-radius | 3 parámetros: El primero a ( ⌜), el segundo a (⌝ y ⌞) y el tercero (⌟ ). | |
border-radius | 4 parámetros. Orden de las agujas del reloj, es decir, ⌜,⌝ ,⌟ , ⌞. |
A modo de ejemplo teórico, pueden ver un ejemplo de la aplicación de varios formatos:
.element {
border-radius: 25px; /* Igual a 25px 25px 25px 25px */
border-radius: 25% 50%; /* Igual a 25% 50% 25% 50% */
border-radius: 50px 25px 10px; /* Igual a 50px 25px 25px 10px */
border-radius: 25px 0 15px 50px; /* Aplica a ⌜,⌝ ,⌟ , ⌞ */
}
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 | Significado | Propiedad lógica equivalente... |
|---|---|---|
border-top-left-radius | Indica el redondeo de la esquina [top-left]. | border-start-start-radius |
border-top-right-radius | Indica el redondeo de la esquina [top-right]. | border-start-end-radius |
border-bottom-left-radius | Indica el redondeo de la esquina [bottom-left]. | border-end-start-radius |
border-bottom-right-radius | Indica el redondeo de la esquina [bottom-right]. | border-end-end-radius |
Estas propiedades son ideales para aplicar junto a la herencia de CSS y sobreescribir valores específicos.
Observa que si aplicas en un elemento muy pequeño valores individuales diferentes es posible que el redondeo de una esquina afecte al de otra esquina, modificando su forma.
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.
Ten en cuenta que sólo variando el radio de
Xno conseguirás efecto visual aparente, varia tanto el radio deXy el deYpara darte cuenta de ello.
Veamos algunos ejemplos de código:
.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) */
}
