border-left-width
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS border-left-width permet de définir l'épaisseur de la bordure gauche d'un élément.
Exemple interactif
border-left-width: thick;
border-left-width: 2em;
border-left-width: 4px;
border-left-width: 2ex;
border-left-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
css
/* Valeurs avec un mot-clé */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
/* Valeur de type <length> */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;
/* Valeurs globales */
border-left-width: inherit;
border-left-width: initial;
border-left-width: revert;
border-left-width: revert-layer;
border-left-width: unset;
Valeurs
<line-width>-
Définit l'épaisseur de la bordure, soit par une valeur explicite de type
<length>positive, soit par un mot-clé. Si c'est un mot-clé, il doit s'agir de l'une des valeurs suivantes :thin(fin)medium(intermédiaire)thick(épais)
Note :
La spécification ne précise pas exactement l'épaisseur associée à chaque mot-clé, le résultat précis dépend donc de l'implémentation. Cependant, l'ordre thin ≤ medium ≤ thick est toujours respecté et les valeurs restent constantes pour un même document.
Définition formelle
| Valeur initiale | medium |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | la longueur absolue ou 0 si border-left-style vaut none ou hidden |
| Type d'animation | une longueur |
Syntaxe formelle
border-left-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Exemples
Comparer les largeurs de bordure
HTML
html
<div>Élément 1</div>
<div>Élément 2</div>
CSS
css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-left-width: thick;
}
div:nth-child(2) {
border-left-width: 2em;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés liées à la largeur de la bordure :
border-top-width,border-right-width,border-bottom-widthetborder-width. - Les autres propriétés CSS liées à la bordure du côté gauche :
border,border-left,border-left-styleetborder-left-color.