border-left
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…