Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

La propriété border-width définit la largeur d'une bordure pour la boîte d'un élément. Cette propriété est une propriété raccourcie pour définir les propriétés détaillées border-top-widthborder-right-widthborder-bottom-width et border-left-width. Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie border.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Animablepour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Une largeur pour chaque côté */
border-width: 5px;

/* largeur verticale puis horizontale */
border-width: 2px 1.5em;

/* haut | largeur horizontale | bas */
border-width: 1px 2em 1.5cm;

/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;

border-width: inherit;

Valeurs

<br-width>
Une valeuer de longueur (type <length> ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
thin
 
La bordure est fine.
medium
 
La bordure est moyenne.
thick
 
La bordure est épaisse.
 La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : thin ≤ medium ≤ thick et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
inherit
Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour l'élément parent.

Syntaxe formelle

<br-width>{1,4}


<br-width> = <length> | thin | medium | thick

Exemples

HTML

<p id="unevaleur">
  Une valeur : la bordure fait 6px sur les 4 côtés.
</p>

<p id="deuxvaleurs">
  Deux valeurs différentes : elle fait 2px en haut 
  et en bas et elle mesure 10px pour les bords droit
  et gauche.
</p>

<p id="troisvaleurs">
  Trois valeurs différentes : 0.3em pour le haut,
  9px pour le bas et zéro pour la droite et la 
  gauche.
</p>

<p id="quatrevaleurs">
  Quatre valeurs différentes : "thin" pour le haut,
  "medium" pour la droite, "thick" pour le bas
  et 1em pour la gauche.
</p>

CSS

#unevaleur {
  border: ridge #ccc;
  border-width: 6px;
}

#deuxvaleurs {
  border: solid red;
  border-width: 2px 10px;
}

#troisvaleurs {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}

#quatrevaleurs {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}

p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-width' dans cette spécification.
Candidat au statut de recommandation Pas de modification directe. La modification du type de données <length> impacte cette propriété.
CSS Level 2 (Revision 1)
La définition de 'border-width' dans cette spécification.
Recommendation Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.
CSS Level 1
La définition de 'border-width' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 4.0 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 2.0 1.0 (1.9.2) 6.0 11 3.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, Yuichiro, Mgjbot, Fredchat, Kyodev, VincentN
 Dernière mise à jour par : SphinxKnight,