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.

/* Valeurs avec un mot-clé */
border-width: thin;
border-width: medium;
border-width: thick;

/* Une largeur pour chaque côté */
/* Valeur de type <length> */
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;

/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: unset;

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 :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

  • Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
  • Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
  • Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
  • Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).

Valeurs

<border-width>
Une valeur 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.

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éChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 (Oui)143.51
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple2 ? (Oui)16113

Voir aussi

Étiquettes et contributeurs liés au document

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