Propriété CSS border-left-color
La propriété border-left-color définit la couleur de la bordure gauche d'un élément.
La couleur de la bordure gauche, combiné avec les couleurs des bordures supérieure, droit et inférieure, peuvent aussi être définies avec la propriété raccourcie border-color .
Si vous utilisez la propriété border-left-color , vous devez premièrement définir les propriétés border-style ou border-left-style et ensuite changer la couleur du style défini.
La largeur initiale de la bordure est moyenne. Vous pouvez spécifier la largeur en utilisant les propriétés border-width ou border-left-width .
| Valeur initial | currentColor |
| Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::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
border-left-color: color | transparent | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Exemple de border-left-color</h2>
<div>Exemple pour la propriété border-left-color avec la couleur différente de la bordure gauche. </div>
</body>
</html>Considérons un autre exemple, où la valeur est définie transparent pour la bordure gauche.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>Un titre avec une bordure gauche transparent.</h2>
</body>
</html>Voyons un exemple de la propriété CSS border-left-color, où la valeur est un nom de couleur:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>La propriété border-left-color avec la valeur qui est une couleur nommée.</div>
</body>
</html>Voyons un exemple, où la propriété border-left-color a la valeur hexadecimal:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>La propriété border-left-color avec une valeur hexadecimal.</div>
</body>
</html>Voyons un exemple avec border-left-color en utilisant une valeur RGB :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Propriété border-left-color avec une valeur RGB.</div>
</body>
</html>Voyons un exemple avec border-left-color en utilisant une valeur HSL :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Propriété border-left-color avec une valeur HSL .</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| color | Définit la couleur de la bordure gauche. La couleur par défaut est la couleur de l'élément actuel. On peut utiliser les noms des couleurs, les codes des couleurs hexadecimaux, rgb(), rgba(), hsl(), hsla() Valeur requise. |
| transparent | Applique une couleur transparent à une bordure gauche. La bordure gauche occupera l'espace définie par la valeur border-width . |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Pratiquez vos connaissances
