w3docs logo

Propriété CSS border-left-style

La propriété CSS border-left-style est utilisée pour définir le style de la bordure gauche d'un élément.

La propriété border-left-style est spécifiée en tant qu'un seul mot-clé choisi parmi ceux disponibles pour la propriété border-style. La propriété border-style est utilisée pour définir le style de tous les côtés d'un élément , mais la propriété border-left-style ne définit un style que pour la bordure gauche.

La largeur de la bordure droite est moyenne. Elle peut être changée en utilisant la propriété border-left-width ou border-width.

Les navigateurs rendent les styles différement. Chrome, par exemple, couramment rend les points comme les points réctangulaires, et pas cerclés.

La spécification ne spécifie pas le nombre d'espacement entre les points et les tirets.
La spécification ne définit pas comment les bordures des styles différents se connectent dans les coins.
Valeur initiale none
Appliquée à Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non
Animable Non
Version CSS1
Syntaxe DOM object.style.borderLeftStyle = "solid";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-left-style: solid;
      }
      div {
      border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Exemple avec border-left-style solide.</p>
    <div>Exemple avec border-left-style en pointillé (dotted).</div>
  </body>
</html>

Voyons un exemple, où toutes les valeurs de style sont utilisées en ordre pour voir la différence entre elles:

En fonction de la valeur de border-color, les effets des valeurs groove, ridge, inset and outset peuvent être changés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>
    <h2>Exemples des valeurs de border-left-style </h2>
    <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>

Valeurs

Valeur Description
none Définit qu'il n'y a aucune bordure.
Valeur par défaut.
hidden C'est le même que "none" à l'exception de la résolution du conflict de bordure pour les élément de table.
dotted Définit une bordure en pointillé.
dashed Définit une bordure de tirets.
double Définit une double bordure.
solid Définit une bordure solide.
groove Définit une 3D bordure rainurée. Son effet peut être changé avec la valeur de border-color.
ridge Définit une 3D bordure striée. Son effet peut être changé avec la valeur de border-color.
inset Définit une 3D bordure de médaillon. Son effet peut être changé avec la valeur de border-color.
outset Définit une 3D bordure de départ. Son effet peut être changé avec la valeur de border-color.
initial Définit la valeur par défaut.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1+ 1+ 1+ 9.2+

Pratiquez vos connaissances

Quelles sont les valeurs possibles pour la propriété 'border-left-style' en CSS ?
Trouvez-vous cela utile?