W3docs
fr
Se connecter

Propriété CSS border-left-color

La propriété border-left-color définit la couleur de la bordure gauche d'un élément. Découvrez toutes les valeurs avec des exemples.

La propriété CSS border-left-color définit la couleur de la bordure gauche d'un élément. Elle ne contrôle que la couleur — la bordure doit également avoir un style et une largeur pour être visible.

Cette page couvre la syntaxe de border-left-color, pourquoi un style de bordure est nécessaire pour qu'elle s'affiche, et des exemples concrets pour chaque type de valeur de couleur (couleurs nommées, hex, RGB, HSL et transparent).

Pourquoi un style de bordure est requis

Une bordure comporte trois éléments : le style, la largeur et la couleur. Par défaut, le style de bordure est none, ce qui signifie que le navigateur ne dessine aucune bordure — ainsi, définir uniquement border-left-color ne produit rien de visible.

Pour faire apparaître la bordure gauche, définissez d'abord un style avec border-style ou border-left-style, puis appliquez la couleur :

.box {
  border-left-style: solid; /* required, otherwise the border is invisible */
  border-left-width: 4px;   /* optional; defaults to medium */
  border-left-color: #1c87c9;
}

Si vous souhaitez également colorier les bordures supérieure, droite et inférieure, le raccourci border-color définit les quatre côtés à la fois. La largeur est contrôlée séparément avec border-width ou border-left-width (la largeur par défaut est medium).

La valeur initiale est currentColor, ce qui signifie que, jusqu'à ce que vous définissiez une couleur, la bordure prend la valeur color propre à l'élément.

Résumé de la propriété

Valeur initialecurrentColor
S'applique àTous les éléments. S'applique également à ::first-letter.
HéritéeNon
AnimatableOui. La couleur de la bordure gauche est animatable.
VersionCSS1
Syntaxe DOMobject.style.borderLeft = "1px solid black";

Syntaxe

border-left-color: color | transparent | initial | inherit;

Exemples

Colorier la bordure gauche différemment des autres

Cet exemple dessine une bordure pleine sur tous les côtés avec border-color, puis remplace uniquement le côté gauche pour le mettre en évidence :

<!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>
Essayez vous-même »

Résultat :

Exemple de la propriété CSS border-left-color montrant une boîte avec une bordure gauche bleue

Utiliser la valeur "transparent"

Une bordure gauche transparent est invisible mais occupe toujours l'espace défini par la largeur de bordure. Cela est utile pour maintenir l'alignement des mises en page ou pour créer des effets visibles au survol :

<!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>
Essayez vous-même »
Info

Vous pouvez définir la couleur sous forme de couleur nommée, d'un code hexadécimal, ou d'une valeur rgb(), rgba(), hsl() ou hsla(). Les exemples ci-dessous montrent les formats les plus courants.

Valeur de couleur nommée

<!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>
Essayez vous-même »

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>
Essayez vous-même »

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>
Essayez vous-même »

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>
Essayez vous-même »

Valeurs

ValeurDescriptionEssayer
colorDéfinit la couleur de la bordure gauche. La couleur par défaut est la couleur de l'élément courant. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur requise.Essayer »
transparentApplique une couleur transparente à la bordure gauche. La bordure gauche occupera toujours l'espace défini par la valeur border-width.Essayer »
initialRéinitialise la propriété à sa valeur par défaut.Essayer »
inheritHérite de la propriété de son élément parent.

Propriétés associées

Pratique

Pratique
Quelle affirmation concernant la propriété CSS 'border-left-color' est correcte ?
Quelle affirmation concernant la propriété CSS 'border-left-color' est correcte ?
Was this page helpful?