Propiedad CSS border-bottom-left-radius
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 de CSS3.
Si no se especifica un valor, la esquina permanece cuadrada. Cuando se proporciona un valor, se crea un cuarto de elipse. Si utiliza una imagen de fondo o color, esta 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 se proporciona un solo 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 se refieren al ancho del cuadro, y los porcentajes para el radio vertical se refieren a la altura del cuadro. No se permiten valores negativos.
Si se aplica la propiedad abreviada border-radius después de border-bottom-left-radius, esta sobrescribe el valor de la propiedad individual.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | 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>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 | Ejecutar |
|---|---|---|
| length | Especifica el redondeo de la esquina inferior izquierda en "px". | Ejecutar » |
| % | Especifica el redondeo de la esquina inferior izquierda en porcentaje. | Ejecutar » |
| initial | Establece la propiedad en su valor predeterminado. | Ejecutar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad 'border-bottom-left-radius' en CSS?