Propriété CSS border-width

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées