border-width
La propriété border-width définit la largeur (l'épaisseur) 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-width, border-right-width, border-bottom-width et border-left-width.On peut exprimer les valeurs données à cette propriété soit par une unité de longueur soit par un mot-clé :
<!-- Style commun aux exemples qui suivent -->
<style>
.ex {
width: 300px;
height: 120px;
background-color: palegreen;
border-style: solid;
border-color: #ff0000;
}
</style>
- border-width: thin; La bordure sera fine
- border-width: medium; C'est la valeur par défaut, la bordure sera d'une épaisseur moyenne
- border-width: thick; La bordure sera épaisse
- Une valeur Les quatre côtés de la bordure auront la même épaisseur.
border-width: 4mm;
- Deux valeurs La première valeur correspond au haut et au bas de la bordure, la deuxième valeur correspond aux côtés droit et gauche de la bordure.
border-width: 2px 10px;
- Trois valeurs La première valeur correspond au haut de la bordure, la deuxième valeur correspond aux côtés droit et gauche de la bordure et la troisième valeur correspond au bas de la bordure.
border-width: 2px 10px thick;
- Quatre valeurs Chaque valeur correspond respectivement au haut, à la droite, au bas et à la gauche de la bordure.
border-width: 5px 10px 15px 20px;