border-width |
Largeur de la bordure |
| CSS3 |
|
Syntaxe
|
border-width: longueur|medium|thick|thin|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| longueur |
Ce paramètre permet d'indiquer la largeur de la bordure. |
| medium |
Ce paramètre permet d'indiquer que la largeur de la bordure est médium. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| thin |
Ce paramètre permet d'indiquer que la largeur de la bordure est mince. |
| thick |
Ce paramètre permet d'indiquer que la largeur de la bordure est épaisse. |
Description
Cette propriété permet de définir la largeur de la bordure d'un élément.
Remarques
- Définition et fonction : La propriété border-width contrôle l'épaisseur des bordures d'un élément HTML. Elle
peut définir une largeur uniforme pour toutes les bordures ou des largeurs spécifiques pour chaque côté (haut, droite, bas, gauche).
- Syntaxe flexible : La propriété accepte jusqu'à quatre valeurs, permettant de spécifier les largeurs individuellement. Par exemple, border-width: 5px 10px 15px 20px;
configure les bordures dans l'ordre : haut, droite, bas, gauche.
- Unités de mesure acceptées : Comme pour d'autres propriétés CSS, border-width prend des unités absolues (px, pt, cm) ou relatives (em, rem, %). Cette
flexibilité permet d'adapter les bordures à des designs fixes ou responsives.
- Mots-clefs prédéfinis : La propriété prend également en charge les mots-clefs thin, medium, et thick, offrant une solution rapide pour définir des
largeurs sans spécifier de valeur numérique.
- Interaction avec border-style : Une bordure ne sera visible que si un style est défini via la propriété border-style. Par exemple, un border-width: 5px;
n'affichera rien si border-style: none; est défini par défaut.
- Impact visuel et design : L'utilisation de border-width permet de mettre en évidence certains éléments. Une bordure épaisse peut attirer l'attention, tandis
qu'une bordure fine ajoute un détail subtil sans dominer le design.
- Compatibilité avec les navigateurs Web : La propriété border-width est bien prise en charge par tous les navigateurs modernes. Cependant, les mots-clefs
prédéfinis (thin, medium, thick) peuvent être interprétés légèrement différemment selon les navigateurs.
- Ordre des valeurs : Lorsque plusieurs valeurs sont spécifiées, elles suivent un ordre précis : haut, droite, bas, gauche (dans le sens des aiguilles d'une
montre). Si seulement une ou deux valeurs sont fournies, CSS applique des règles de raccourci pour les côtés manquants.
Dernière mise à jour : Dimanche, le 20 décembre 2015
