Propriété CSS border-style

La propriété CSS border-style définit le style de toutes les côtés des bordures d'un élément. C'est une propriété raccourcie définissant les border-top-style, border-bottom-style, border-left-style, border-right-style.

Cette propriété peut avoir d'un à quatre valeurs. Donc, chaque côté peut avoir sa propre valeur.

La valeur par défaut de la propriété border-style est "none". Les bordures sont placées en haut du fond de l'élément.

De plus, vous devez savoir que quelques navigateurs ne supportent pas quelques types des styles. Généralement, si le style n'est pas supporté, le navigateur affiche une bordure solide.

La propriété border-style peut être spécifiée en utilisant une, deux, trois ou quatre valeurs. Si on a une valeur spécifiée, cela applique le même style pour tous les quatres côtés . Quand on a deux valeurs spécifiées, le premier style est appliqué aux côtés supérieure et inférieure; le deuxième style est appliqué aux côtés gauche et droit. Quand on a trois valeurs spécifiées, le premier style est appliqué au supérieure, le deuxième style est appliqué aux gauche et droit, et le troisième est appliqué à l'inférieure. Quand il y a quatre valeurs spécifiées, les styles sont appliqués aux côtés supérieure, droit, inférieure et gauche, comme un ordre horaire.

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.borderStyle = "dotted double";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      border-style: dotted;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Exemple de border style en pointillé (dotted).</p>
  </body>
</html>

Comme vous le voyez dans l'exemple donné, tous les côtés ont la même valeur.

Maintenant, voyons un exemple, où chaque côté a sa propre valeur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
        p {
      border-width: 4px;
      border-style: double solid dashed dotted;
      border-color: #1c87c9;
      color: #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Exemple, où chaque côté a sa propre valeur.</p>
  </body>
</html>

Voyons un autre exemple, où tous les quatre valeurs sont utilisées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background: #eee;
      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: #c9c5c5;
      border: 8px solid #1c87c9;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-style example classes */
      .b1 { border-style: hidden; }
      .b2 { border-style: dotted;}
      .b3 { border-style: dashed;}
      .b4 { border-style: solid;}
      .b5 { border-style: double;}
      .b6 {border-style: groove;}
      .b7 {border-style: ridge;}
      .b8 {border-style: inset;}
      .b9 {border-style: outset;}
    </style>
  </head>
  <body>
    <h2>Exemples des valeurs de border-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 N'affiche aucune bordure. Valeur par défaut.
hidden 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.
solid Définit une bordure solide.
double La bordure est spécifiée comme les doubles lignes solides.
groove Définit une 3D bordure rainurée et donne l'impression que la bordure est découpée. Le contraire de ridge.
ridge Définit une 3D bordure striée et donne l'impression de l'apparence extrudé. Le contraire de groove.
inset C'est un effet 3D qui donne l'impression que l'élément apparaît embarqué. Le contraire de outset.
outset C'est un effet 3D qui donne l'impression que l'élément apparaît en relief. Le contraire de inset.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées