Propriété CSS border-width

❮ Précédent Suivant ❯

La propriété CSS border-width définit la largeur de tous les quatres côtés des bordures d'un élément. Cette propriété a quatre valeurs. Qund vous voyez une valeur, la valeur border-width sera appliqué à tous lesquatres côtés de l'élément (i.e. supérieure, droit, inférieure, gauche). C'est une propriété raccourcie qui spécifie les border-top-width, border-left-width, border-right-width, border-bottom-width.

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, droite, inférieure et gauche, comme un ordre horaire.

Premièrement, vous devez définir la propriété border-style, ensuite la propriété border-width. Un élément doit avoir des bordures avant que vous pouves définir la largeur.

Valeur initiale	medium
Héritée	Non
Animable	Oui. La largeur de la bordure est animable.
Version	CSS1
Syntaxe JavaScript	object.style.borderWidth = "1px 5px";

Syntaxe

border-width: medium | thin | thick | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-style: solid;
      border-width: 1px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>La bordure de ce paragraphe est séléctionnée comme 1px.</p>
  </body>
</html>

Essayez-vous-même!

Voyons le troisième exemple, qui contient trois valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      color: #666;
      padding: 5px;      
      border-style: solid; 
      } 
      .thin {
      border-width: 1px;
      }
      .medium{
      border-width: medium;
      }
      .thick {
      border-width: 10px;
      }
    </style>
  </head>
  <body>
    <p class="thin">La bordure de ce paragraphe est séléctée comme 1px.</p>
    <p class="medium">La bordure de ce paragraphe est séléctée comme medium.</p>
    <p class="thick">La bordure de ce paragraphe est séléctée comme 10px.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
medium	Définit une bordure moyenne. Valeur par défaut.
thin	Définit une bordure mince.
thick	Définit une bordure épaise.
length	Définit l'épaisseur de la bordure.
initial	Définit la valeur initiale.
inherit	Hérite la propriété d'élément parent.