Propriété CSS border-width
La propriété CSS border-width définit la largeur de la bordure d'un élément. Elle s'applique simultanément aux quatre côtés. Vous pouvez également définir la largeur pour chaque côté individuellement à l'aide des propriétés détaillées suivantes :
- border-top-width, qui définit la largeur de la bordure supérieure d'un élément.
- border-left-width, qui définit la largeur de la bordure gauche d'un élément.
- border-right-width, qui définit la largeur de la bordure droite d'un élément.
- border-bottom-width, qui définit la largeur de la bordure inférieure d'un élément.
INFO
La propriété border-style a pour valeur par défaut none. Si vous ne spécifiez pas de style de bordure, la largeur de la bordure ne sera pas visible.
Cette propriété accepte une à quatre valeurs. Une seule valeur s'applique aux quatre côtés. Deux valeurs s'appliquent respectivement aux côtés haut/bas et gauche/droite. Trois valeurs s'appliquent aux côtés haut, gauche/droite et bas. Quatre valeurs s'appliquent dans l'ordre aux côtés haut, droit, bas et gauche.
| Valeur initiale | medium |
|---|---|
| Héritée | Non |
| Animable | Oui. La largeur de la bordure est animable. |
| Version | CSS1 |
| Syntaxe JavaScript | object.style.borderWidth = "1px 5px"; |
Syntaxe
Syntaxe de la propriété CSS border-width
border-width: <line-width>{1,4} | initial | inherit;Exemple de la propriété border-width :
Exemple de la propriété CSS border-width
<!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>Exemple de la propriété border-width avec trois valeurs :
Exemple de la propriété CSS border-width avec les valeurs px et medium
<!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;
}
</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>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Jouer |
|---|---|---|
| medium | Définit une bordure moyenne. C'est la valeur par défaut. (Mot-clé relatif avec des valeurs en pixels définies par le navigateur.) | Jouer » |
| thin | Définit une bordure fine. | Jouer » |
| thick | Définit une bordure épaisse. | Jouer » |
| length | Définit l'épaisseur de la bordure. | Jouer » |
| initial | Définit la propriété sur sa valeur par défaut. | Jouer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les valeurs suivantes, laquelle peut être utilisée pour spécifier la largeur des bordures CSS ?