border-left
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é border-left est une propriété raccourcie qui permet de définir la bordure gauche d'un élément
Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :
Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.
Exemple interactif
border-left: solid;
border-left: dashed red;
border-left: 1rem solid;
border-left: thick double #32a1ce;
border-left: 4mm ridge rgba(211, 220, 50, 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #8b008b;
padding: 0.75em;
width: 80%;
height: 100px;
}
Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
Comme pour les autres propriétés raccourcies, border-left définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
border-left-style: dotted;
border-left: thick green;
est équivalent à :
border-left-style: dotted;
border-left: none thick green;
et la valeur border-left-style fournie avant border-left est ignorée.
La valeur par défaut de border-left-style étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.
Syntaxe
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed green;
Valeurs
<br-width>-
Voir
border-left-width. <br-style>-
Voir
border-left-style. <color>-
Voir
border-left-color.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
border-left =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
CSS
.exemple {
border-left: 3px dotted orange;
}
HTML
<p class="exemple">
En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
« MARMELADE D’ORANGES. »
</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Compatibilité des navigateurs
Chargement…