border-inline-start
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 janvier 2020.
La propriété raccourcie CSS border-inline-start permet de définir les valeurs individuelles des propriétés logiques de bordure en début de ligne à un seul endroit dans la feuille de style.
Exemple interactif
border-inline-start: solid;
writing-mode: horizontal-tb;
border-inline-start: dashed red;
writing-mode: vertical-rl;
border-inline-start: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;
<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: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;
/* Valeurs globales */
border-inline-start: inherit;
border-inline-start: initial;
border-inline-start: revert;
border-inline-start: revert-layer;
border-inline-start: unset;
La bordure physique à laquelle border-inline-start correspond dépend du mode d'écriture, de la direction et de l'orientation du texte de l'élément. Elle correspond à la propriété border-top, border-right, border-bottom ou border-left, selon les valeurs définies pour writing-mode, direction et text-orientation.
Les propriétés associées sont border-block-start, border-block-end et border-inline-end, qui définissent les autres bordures de l'élément.
Valeurs
Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
<'border-width'>-
La largeur de la bordure. Voir
border-width. <'border-style'>-
Le style utilisé pour la ligne de la bordure sur ce côté. Voir
border-style. <color>-
La couleur de la bordure.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments |
| 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-inline-start =
<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
HTML
<div>
<p class="exempleTexte">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-rl;
border-inline-start: 5px dashed blue;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-shorthands |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- Cette propriété correspond à l'une des propriétés physiques de bordure :
border-top,border-right,border-bottomouborder-left. - Les propriétés
writing-mode,direction,text-orientation