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>
Vous pouvez définir la valeur hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs pour la propriété border-left-color .

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+


Trouvez-vous cela utile?

Articles Associées