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.

Si on utilise les propriétés logiques, elle définit border-block-start-width, border-block-end-width, border-inline-start-width et border-inline-end-width.

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie border.

Syntaxe

/* 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;

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

<line-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

<line-width>{1,4}


<line-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.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 2Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

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,