Propiedad CSS border-left-color
La propiedad border-left-color especifica el color del borde izquierdo de un elemento.
El color del borde izquierdo junto con los colores de los bordes derecho, superior e inferior también se pueden especificar con la propiedad abreviada border-color.
Si utiliza la propiedad border-left-color, primero debe establecer las propiedades border-style o border-left-style y luego cambiar el color del estilo especificado.
El ancho predeterminado de un borde es medium. Puede definir el ancho utilizando las propiedades border-width o border-left-width.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Se hereda | No |
| Animable | Sí. El color del borde izquierdo es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderLeft = "1px solid black"; |
Sintaxis
Sintaxis de la propiedad CSS border-left-color
border-left-color: color | transparent | initial | inherit;Ejemplo de la propiedad border-left-color:
Ejemplo de la propiedad CSS border-left-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Resultado
Considere otro ejemplo donde el valor se establece en transparent para el borde izquierdo.
Ejemplo de la propiedad border-left-color con el valor "transparent":
Ejemplo de la propiedad CSS border-left-color con valor transparente
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>INFO
Puede establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad border-left-color.
Ejemplo de la propiedad border-left-color con un valor de color con nombre:
Ejemplo de la propiedad CSS border-left-color con valor darkred
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Ejemplo de la propiedad border-left-color con un valor hexadecimal:
Ejemplo de la propiedad CSS border-left-color con valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Ejemplo de la propiedad border-left-color con un valor RGB:
Ejemplo de la propiedad CSS border-left-color con valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Ejemplo de la propiedad border-left-color con un valor HSL:
Ejemplo de la propiedad CSS border-left-color con valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Valores
| Valor | Descripción | Probar » |
|---|---|---|
| color | Define el color del borde izquierdo. El color predeterminado es el color del elemento actual. Se pueden usar nombres de colores, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor obligatorio. | Probar » |
| transparent | Aplica un color transparente al borde izquierdo. El borde izquierdo seguirá ocupando el espacio definido por el valor de border-width. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué es correcto sobre la propiedad 'border-left-color' en CSS según la información proporcionada en la URL?