Propriété CSS border-left-color
La propriété border-left-color spécifie la couleur de la bordure gauche d'un élément.
La couleur de la bordure gauche, ainsi que celles des bordures droite, supérieure et inférieure, peuvent également être définies à l'aide de la propriété raccourcie border-color.
Si vous utilisez la propriété border-left-color, vous devez d'abord définir les propriétés border-style ou border-left-style, puis modifier la couleur du style spécifié.
La largeur par défaut d'une bordure est medium. Vous pouvez définir la largeur à l'aide des propriétés border-width ou border-left-width.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. La couleur de la bordure gauche est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderLeft = "1px solid black"; |
Syntaxe
Syntaxe de la propriété CSS border-left-color
border-left-color: color | transparent | initial | inherit;Exemple de la propriété border-left-color :
Exemple de la propriété 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>Résultat
Considérons un autre exemple où la valeur est définie sur transparent pour la bordure gauche.
Exemple de la propriété border-left-color avec la valeur « transparent » :
Exemple de la propriété CSS border-left-color avec la valeur transparent
<!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
Vous pouvez définir des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs comme valeur pour la propriété border-left-color.
Exemple de la propriété border-left-color avec une valeur de couleur nommée :
Exemple de la propriété CSS border-left-color avec la valeur 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>Exemple de la propriété border-left-color avec une valeur hexadécimale :
Exemple de la propriété CSS border-left-color avec une valeur hexadécimale
<!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>Exemple de la propriété border-left-color avec une valeur RGB :
Exemple de la propriété CSS border-left-color avec une valeur 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>Exemple de la propriété border-left-color avec une valeur HSL :
Exemple de la propriété CSS border-left-color avec une valeur 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>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| color | Définit la couleur de la bordure gauche. La couleur par défaut est celle de l'élément actuel. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur requise. | Tester » |
| transparent | Applique une couleur transparente à la bordure gauche. La bordure gauche occupera toujours l'espace défini par la valeur border-width. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle affirmation est correcte concernant la propriété 'border-left-color' en CSS selon les informations fournies dans l'URL ?