Propriété CSS border-width
CSS border-width est une propriété raccourcie pour définir la largeur des quatre côtés de la bordure. Exemples et démonstrations inclus.
La propriété CSS border-width définit la largeur (l'épaisseur) de la bordure d'un élément. C'est une propriété raccourcie qui s'applique aux quatre côtés à la fois, et elle représente la composante largeur de la propriété raccourcie border plus générale.
Vous pouvez définir chaque côté indépendamment avec les propriétés détaillées :
- border-top-width définit la largeur de la bordure supérieure.
- border-right-width définit la largeur de la bordure droite.
- border-bottom-width définit la largeur de la bordure inférieure.
- border-left-width définit la largeur de la bordure gauche.
Une bordure n'est visible que lorsque border-style est différent de sa valeur par défaut none. Si vous définissez border-width sans préciser de style de bordure, la bordure reste invisible — c'est la raison la plus fréquente pour laquelle une bordure « ne s'affiche pas ».
Comment la propriété raccourcie répartit les valeurs sur les côtés
border-width accepte de une à quatre valeurs, et le nombre de valeurs fournies détermine à quels côtés elles s'appliquent :
| Valeurs fournies | Haut | Droite | Bas | Gauche |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
La forme à quatre valeurs suit l'ordre horaire haut → droite → bas → gauche utilisé par toutes les propriétés raccourcies CSS de type boîte (le même ordre que margin et padding).
Chaque valeur est une <line-width> : soit une longueur (px, em, rem, etc.), soit l'un des mots-clés thin, medium ou thick. Les pourcentages ne sont pas autorisés.
| Valeur initiale | medium |
|---|---|
| Héritage | Non |
| Animable | Oui. La largeur de la bordure est animable. |
| Version | CSS1 |
| Syntaxe JavaScript | object.style.borderWidth = "1px 5px"; |
Syntaxe
border-width: <line-width>{1,4} | initial | inherit;Une valeur unique (quatre côtés identiques)
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Largeur différente par côté
Ici, les trois tailles de mots-clés sont comparées côte à côte, avec en plus une boîte à quatre valeurs où chaque bord a une épaisseur différente.
<!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;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Résultat
Mot-clé ou longueur : quand utiliser lequel
- Utilisez une longueur (
px,em,rem) lorsque vous avez besoin d'une épaisseur précise et prévisible — c'est le cas habituel dans les mises en page réelles. - Utilisez les mots-clés
thin,mediumetthicklorsque le nombre de pixels exact n'a pas d'importance et que vous laissez le navigateur décider. Ils correspondent à de petites valeurs en pixels définies par le navigateur (environ 1px, 3px et 5px dans la plupart des navigateurs, mais la spécification ne les fixe pas). mediumest la valeur initiale, donc un élément avecborder-style: solidet sansborder-widthaffichera déjà une bordure de largeur moyenne.
Les valeurs négatives sont invalides et font ignorer toute la déclaration.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| medium | Définit une bordure de largeur moyenne. C'est la valeur par défaut. (Mot-clé relatif avec des valeurs en pixels définies par le navigateur.) | Essayer » |
| thin | Définit une bordure fine. | Essayer » |
| thick | Définit une bordure épaisse. | Essayer » |
| length | Définit l'épaisseur de la bordure. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. |