Propriété CSSModèle de boîte
border-width
Définit l’épaisseur d’une bordure.
- Valeur initiale
medium- Héritée
- Non
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.borderWidth = "4px"
Exemple
#CSS
.tab.active {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #a78bfa;
}HTML de l’exemple
<nav class="stage" style="display: flex; gap: 16px;">
<span class="tab active" style="padding-bottom: 4px">Description</span>
<span class="tab" style="padding-bottom: 4px">Tâches</span>
<span class="tab" style="padding-bottom: 4px">Avis</span>
</nav>Aperçu
Définition et utilisation
#La propriété border-width définit l’épaisseur de la ligne de bordure. Elle accepte des longueurs ou les mots-clés thin, medium et thick, dont l’épaisseur exacte dépend du navigateur.
Comme les autres raccourcis de côtés, elle accepte de une à quatre valeurs : pour tous les côtés, pour le vertical et l’horizontal, ou séparément pour chaque côté.
L’épaisseur n’est visible que si la bordure a un style autre que none et hidden.
Syntaxe
#Syntaxe
border-width: thin | medium | thick | <longueur> (1 à 4 valeurs);Valeurs
#Valeurs en pratique
#thin
Une ligne fine, généralement 1px.
.demo { border-width: thin; }medium
Une ligne moyenne, généralement 3px. La valeur par défaut.
.demo { border-width: medium; }thick
Une ligne épaisse, généralement 5px.
.demo { border-width: thick; }2px 8px
Fine en haut et en bas, épaisse sur les côtés.
.demo { border-width: 2px 8px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les mots-clés
thin,mediumetthickvarient légèrement selon les navigateurs. Pour plus de précision, indiquez des pixels. - L’épaisseur seule ne donne rien sans
border-style.
Entrées associées
#- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- border-styleDéfinit le style de la ligne de bordure : continue, en tirets, en pointillés, et plus encore.
- border-colorDéfinit la couleur d’une bordure.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.