Attribut BORDER-WIDTH
Rôle
L’attribut border-width permet de spécifier l’épaisseur de la bordure.
Cet attribut peut prendre plusieurs valeurs possibles :
4 valeurs pour pouvoir différencier les bordures (dans l’ordre) haut-droite-bas-gauche de l’élément HTML.
border-width : thin medium thick 12px ;
3 valeurs : la première pour la bordure du haut, la deuxième pour les bordures droite-gauche, et la dernière pour la bordure du bas
border-width : thin medium thick ;
2 valeurs : la première pour les bordures haut-bas, la deuxième pour les bordures droite-gauche.
border-width : thin medium ;
1 valeur pour les quatres bordures.
border-width : thin ;
Version : CSS1
Héritage (inherit) : non
Propriété Javascript : element.style.borderWidth
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 300px;
padding: 10px;
border-color: silver;
border-style: solid;
border-width: 5px 2px 15px;
}
– Le code HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime et reiciendis ullam, accusamus blanditiis iste rerum. Impedit placeat tenetur, aperiam iure dolores quibusdam repellat, alias, nesciunt, </div>
Résultat
Compatibilité
L’attribut border-width est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut border-width sont:
- medium
- Epaisseur moyenne : valeur par défaut
Syntaxe :
border-width : medium - thin
- Epaisseur mince
Syntaxe :
border-width : thin - thick
- Epaisseur importante
Syntaxe :
border-width : thick - length
- L’épaisseur de la bordure est définie par une valeur en px, cm, etc
Syntaxe :
border-width : 10px - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
border-width : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
border-width : inherit
A voir aussi
border box-sizing clip height width margin padding overflowmax-width min-width outline resize
