Propiedad CSS border-bottom-left-radius
CSS border-bottom-left-radius redondea la esquina inferior izquierda de un elemento. Aprende su sintaxis, valores y ejemplos.
La propiedad border-bottom-left-radius especifica el redondeo de la esquina inferior izquierda del elemento.
La propiedad border-bottom-left-radius es una de las propiedades CSS3.
Si no se especifica un valor, la esquina permanece en ángulo recto. Cuando se proporciona un valor, se crea un cuarto de elipse. Si se usa una imagen de fondo o un color, se recortará en el borde. El proceso de recorte está definido por el valor de la propiedad background-clip.
La propiedad border-bottom-left-radius tiene dos valores: longitud y porcentaje. Cuando solo se proporciona un valor, especifica tanto el radio horizontal como el vertical de la elipse. Si se proporcionan dos valores, el primero establece el radio horizontal y el segundo establece el radio vertical.
Los porcentajes para el radio horizontal hacen referencia al ancho del cuadro, y los porcentajes para el radio vertical hacen referencia a la altura del cuadro. No se permiten valores negativos.
Si la propiedad abreviada border-radius se aplica después de border-bottom-left-radius, anula el valor de la propiedad individual. Por esta razón, cuando se establecen esquinas de forma individual, se deben declarar después de cualquier abreviatura border-radius. La propiedad border-bottom-left-radius es más útil cuando se desea redondear solo una esquina de un elemento — por ejemplo, una burbuja de chat, una tarjeta con una única esquina redondeada o un botón de forma personalizada — mientras se dejan las otras tres esquinas en ángulo recto.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animatable | Sí. El radio del borde inferior izquierdo es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderBottomLeftRadius = "35px"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom-left-radius
border-bottom-left-radius: length| % | initial | inherit;Ejemplo de la propiedad border-bottom-left-radius:
Ejemplo de la propiedad CSS border-bottom-left-radius con valor en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Resultado
Ejemplo de la propiedad border-bottom-left-radius con dos valores:
Ejemplo de la propiedad CSS border-bottom-left-radius con dos valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Aquí 30px es el radio horizontal y 15px es el radio vertical, lo que produce una esquina elíptica (no circular) que es más ancha que alta.
Ejemplo de la propiedad border-bottom-left-radius con el valor "porcentaje":
Ejemplo de la propiedad CSS border-bottom-left-radius con valor %(porcentaje)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Especifica el redondeo de la esquina inferior izquierda en "px". | Pruébalo » |
| % | Especifica el redondeo de la esquina inferior izquierda en porcentaje. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
La propiedad border-bottom-left-radius es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Hoy en día no se necesitan prefijos de proveedor.
Propiedades relacionadas
border-bottom-left-radius controla una única esquina. Para redondear otras esquinas o todas a la vez, utiliza estas propiedades relacionadas:
- border-radius — abreviatura que establece las cuatro esquinas en una sola declaración.
- border-bottom-right-radius — redondea la esquina inferior derecha.
- border-top-left-radius — redondea la esquina superior izquierda.
- border-top-right-radius — redondea la esquina superior derecha.