Los elementos HTML ocupan regiones rectangulares, por lo que tienen cuatro esquinas con ángulo recto (90 grados). En CSS es posible modificar las esquinas: se pueden curvar con forma de círculo y con forma de elipse, dependiendo de los parámetros. Para ello se usa la propiedad border-radius.
El efecto de redondear esquinas era muy difícil en versiones anteriores de CSS. Era necesario recurrir al uso de imágenes insertadas como fondo. Esta propiedad fue introducida en la versión CSS3 y fue muy aplaudida por los diseñadores web. Sin ninguna duda, los bordes curvos mejoran el diseño.
Las esquinas redondeadas se aplican a partir del borde del «modelo de cajas». No tendría sentido que se aplicara al relleno, ya que este está delimitado por el borde; y aún tendría menos sentido que se aplicara a los márgenes, ya que en ellos no se aplica el color de fondo del elemento. El efecto no se vería.
El valor por defecto de border-radius es 0: los bordes de cualquier elemento HTML aparecen rectos. Esta propiedad es una abreviatura (shorthand) que admite cuatro parámetros para redondear las esquinas y otros cuatro para crear curvas en forma de elipse, lo que sería dos radios por esquina.
La sintaxis para crear esquinas redondeadas es la siguiente: debe usarse de 1 a 4 valores de longitud para indicar el radio de redondeo, y separados por una barra (/) se introducen los otros cuatro valores opcionales de longitud para indicar el segundo radio en caso de querer crear una forma elipsoide.
Tanto los cuatro primeros valores como los cuatro segundos siguen el mismo orden. Si sólo hay uno se aplica a las cuatro esquinas. Si hay dos, el primero se aplica a la esquina superior izquierda y a la esquina inferior derecha, mientras que el segundo a los lados opuestos. Si hay tres, el tercer parámetro modificará la esquina inferior derecha. Si hay cuatro se sigue el orden de las agujas del reloj.
Tabla resumen de valores abreviados:
| Ejemplos | Descripción |
|---|---|
border-radius: 1px | A los cuatro lados. |
border-radius: 1px 2px | Arriba izquierda y abajo derecha; arriba derecha y abajo izquierda. |
border-radius: 1px 2px 3px | Arriba izquierda; arriba derecha y abajo izquierda; abajo derecha. |
border-radius: 1px 2px 3px 4px | Arriba izquierda; arriba derecha; abajo derecha; abajo izquierda. |
border-radius: 5px / 6px | Primer radio a los cuatro lados; segundo radio a los cuatro lados. |
Veamos la aplicación de algunos ejemplos.
En el primer ejemplo creamos un contenedor con un borde turquesa que tendrá las esquinas redondeadas con un radio de 8 píxeles.
.ejemplo1 {
border-radius: 8px;
}
Resultado:
A continuación, se muestra un ejemplo con dos esquinas cuyo radio es mucho mayor al de las otras dos, creando así una curiosa forma:
.ejemplo2 {
border-radius: 4px 20px;
}
Resultado:
En este tercer ejemplo se hace uso de los cuatro parámetros para especificar cuatro esquinas redondeadas con valores diferentes:
.ejemplo3 {
border-radius: 4px 17px 17px 30px;
}
Resultado:
En el cuarto ejemplo usamos los dos radios para visualizar la curva con forma de elipse. El primer radio es tres veces mayor que el segundo:
.ejemplo4 {
border-radius: 50% 40% / 15% 40%;
}
Resultado:
Propiedades específicas de esquinas
Se puede modificar el redondeo de las esquinas por separado mediante cuatro propiedades específicas de CSS. Por tanto, sin usar las propiedades abreviadas es posible redondear las esquinas de forma independiente: arriba izquierda, arriba derecha, abajo izquierda y abajo derecha.
| Propiedad | Descripción |
|---|---|
border-top-left-radius | Redondea la esquina superior izquierda. |
border-top-right-radius | Redondea la esquina superior derecha. |
border-bottom-left-radius | Redondea la esquina inferior izquierda. |
border-bottom-right-radius | Redondea la esquina inferior derecha. |
La propiedad ‘border-top-left-radius’
Con la propiedad border-top-left-radius podemos curvar la esquina superior izquierda de cualquier elemento HTML. Veamos un ejemplo:
.btlr {
border-top-left-radius: 20px;
}
Resultado:
Esquina superior izquierda.
La propiedad ‘border-top-right-radius’
Usando la propiedad border-top-right-radius redondearemos la esquina superior derecha, también con 20 píxeles. Veamos otro ejemplo:
.btrr {
border-top-right-radius: 20px;
}
Resultado:
Esquina superior derecha.
La propiedad ‘border-bottom-left-radius’
Ahora la parte de abajo. Con la propiedad border-bottom-left-radius damos forma a la esquina inferior izquierda de un elemento. Por ejemplo:
.bblr {
border-bottom-left-radius: 20px;
}
Resultado:
Esquina inferior izquierda.
La propiedad ‘border-bottom-right-radius’
Finalmente, mediante la propiedad border-bottom-right-radius modificamos la esquina inferior derecha de los elementos. Veamos un último ejemplo:
.bbrr {
border-bottom-right-radius: 20px;
}
Resultado:
Esquina inferior derecha.
