Propriété CSS border-left-style

La propriété CSS border-left-style définit le style de la bordure gauche d'un élément. Elle accepte un seul mot-clé choisi parmi le même ensemble de valeurs disponibles pour la propriété raccourcie border-style. Contrairement à border-style, qui définit le style des quatre côtés à la fois, border-left-style ne cible que le bord gauche.

Cette propriété s'associe à border-left-width et border-left-color, ou vous pouvez définir les trois à la fois avec la propriété raccourcie border-left. Une bordure n'est visible que lorsque son style est défini sur autre chose que la valeur par défaut none — même une largeur généreuse et une couleur prononcée ne produisent rien tant qu'un style n'est pas appliqué.

La largeur par défaut de la bordure gauche est medium. Ajustez-la avec la propriété border-left-width ou border-width.

Tous les navigateurs ne rendent pas le même style de façon identique. Chrome, par exemple, dessine les points d'une bordure dotted sous forme de petits carrés plutôt que de cercles, et les valeurs 3D (groove, ridge, inset, outset) dépendent de la couleur de la bordure pour produire leur effet d'ombre et de lumière.

Info

La spécification ne précise pas l'espacement entre les points et les tirets.

Info

La spécification ne définit pas la façon dont les bordures de styles différents se rejoignent dans les coins.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non
Animatable	Non
Version	CSS1
Syntaxe DOM	object.style.borderLeftStyle = "solid";

Syntaxe

Syntaxe de la propriété CSS border-left-style

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple de la propriété border-left-style :

Exemple de la propriété CSS border-left-style avec les valeurs solid et dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left-style: solid;
      }
      div {
        border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with solid border-left-style.</p>
    <div>Example with dotted border-left-style.</div>
  </body>
</html>

Essayez vous-même »

Info

Selon la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent être modifiés.

Exemple de la propriété border-left-style avec toutes les valeurs :

Exemple de la propriété CSS border-left-style avec les valeurs hidden, dotted, dashed, solid, double, groove, ridge, inset et outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #8ebf42;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-style example classes */
      .b1 {
        border-left-style: hidden;
      }
      .b2 {
        border-left-style: dotted;
      }
      .b3 {
        border-left-style: dashed;
      }
      .b4 {
        border-left-style: solid;
      }
      .b5 {
        border-left-style: double;
      }
      .b6 {
        border-left-style: groove;
      }
      .b7 {
        border-left-style: ridge;
      }
      .b8 {
        border-left-style: inset;
      }
      .b9 {
        border-left-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Essayez vous-même »

Résultat

Valeurs

Valeur	Description	Essayer
none	Indique qu'il n'y aura pas de bordure. Valeur par défaut.
hidden	Identique à `none`, sauf lors de la résolution de conflits de bordures pour les éléments de tableau, où elle supprime complètement la bordure gauche du rendu.
dotted	Définit une bordure pointillée.
dashed	Définit une bordure en tirets.
double	Définit une bordure double.
solid	Définit une bordure pleine.
groove	Définit une bordure en relief 3D. Son effet peut être modifié avec la valeur de border-color.
ridge	Définit une bordure en crête 3D. Son effet peut être modifié avec la valeur de border-color.
inset	Définit une bordure en retrait 3D. Son effet peut être modifié avec la valeur de border-color.
outset	Définit une bordure en saillie 3D. Son effet peut être modifié avec la valeur de border-color.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Quand l'utiliser

Utilisez border-left-style lorsque vous souhaitez un accent stylisé uniquement sur le bord gauche — un motif courant pour les citations, les cartes d'avertissement et les éléments actifs de barre latérale, où une seule barre colorée marque l'élément sans l'encadrer complètement. Pour le même effet sur les autres côtés, utilisez border-top-style, border-right-style ou border-bottom-style. Lorsque les quatre côtés partagent un même style, la propriété raccourcie border-style est plus concise.

Exercice

Pratique

Quelles valeurs la propriété 'border-left-style' en CSS peut-elle prendre ?