Attribut border-width CSS

Définition et utilisation

L'attribut abrégé border-width définit la largeur de toutes les bordures de l'élément, ou définit individuellement la largeur de chaque bord.

Cette propriété ne fonctionne que si le style de bordure n'est pas none. Si le style de bordure est none, la largeur de la bordure est réinitialisée à 0. Il n'est pas permis de spécifier des valeurs de longueur négatives.

Exemple 1

border-width:fine moyenne épais 10px;
  • La bordure supérieure est une bordure fine
  • La bordure droite est une bordure moyenne
  • La bordure inférieure est une bordure épaisse
  • La bordure gauche est une bordure de 10px de large

Exemple 2

border-width:fine moyenne épais 10px;
  • La bordure supérieure est de 10px
  • La bordure droite et la bordure gauche sont des bords moyens
  • La bordure inférieure est une bordure épaisse

Exemple 3

border-width:fine moyenne;
  • La bordure supérieure et la bordure inférieure sont des bords fins
  • La bordure droite et la bordure gauche sont des bords moyens

Exemple 4

border-width:fine;
  • Tous les quatre bords sont des bords fins

Exemple

Définir la largeur de tous les quatre bords :

p
  {
  border-style:solid;
  border-width:15px;
  }

Essayez-le vous-même

Syntaxe CSS

border-width: moyenne|fine|épais|length|initial|hériter;

Valeur de l'attribut

Valeur Description
Définir une bordure fine. fine
moyenne Par défaut. Définir une bordure moyenne.
épais Définir une bordure épaisse.
length Vous permet de personnaliser la largeur de la bordure.
hériter Définir que la largeur de bordure doit être héritée de l'élément parent.

Autres exemples

Toutes les propriétés de largeur de bordure dans une même déclaration
Cet exemple montre comment utiliser les propriétés abrégées pour définir la largeur de toutes les bordures dans une même déclaration.

Détails techniques

Valeur par défaut : moyenne
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.borderWidth="fine épais"

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Veuillez également consulter :

Tutoriel CSS :Bordure CSS

Manuel de référence du DOM HTML :Attribut borderWidth