La propriété border-left-width
définit l'épaisseur de la bordure pour le côté gauche d'un élément.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Une valeur de longueur */
/* Type <length> */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;
/* Valeurs avec un mot-clé */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
/* Valeurs globales */
border-left-width: inherit;
border-left-width: initial;
border-left-width: unset;
Valeurs
<br-width>
- Une valeur de longueur (
<length>
) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :thin
Une bordure fine. medium
Une bordure moyenne. thick
Une bordure épaisse. thin ≤ medium ≤ thick
et que ces valeurs soient constantes pour un même document.
Syntaxe formelle
Exemples
CSS
.element1{
border-left-width: thick;
border-left-style: solid;
border-left-color: red;
}
.element2{
border-left-width: medium;
border-left-style: solid;
border-left-color: orange;
}
.element3{
border-left-width: thin;
border-left-style: solid;
border-left-color: green;
}
HTML
<p class="element1">
Une bordure épaisse rouge.
</p>
<p class="element2">
Une bordure moyenne orange.
</p>
<p class="element3">
Et une bordure fine verte.
</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Backgrounds and Borders Module Level 3 La définition de 'border-left-width' dans cette spécification. |
Candidat au statut de recommandation | Pas de modification significative. |
CSS Level 2 (Revision 1) La définition de 'border-left-width' dans cette spécification. |
Recommendation | Pas de modification significative. |
CSS Level 1 La définition de 'border-left-width' dans cette spécification. |
Recommendation | Définition initiale. |
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 |
Compatibilité des navigateurs
BCD tables only load in the browser
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Voir aussi
- Les autres propriétés liées à la largeur de la bordure :
- Les autres propriétés CSS liées à la bordure du côté gauche :