Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-inline-start-color
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éCSSborder-inline-start-color définit la couleur de la bordure logique de début de ligne d'un élément, qui correspond à une couleur de bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond à la propriétéborder-top-color,border-right-color,border-bottom-color ouborder-left-color, selon les valeurs définies pourwriting-mode,direction ettext-orientation.
Exemple interactif
border-inline-start-color: red;writing-mode: horizontal-tb;border-inline-start-color: #32a1ce;writing-mode: vertical-rl;border-inline-start-color: rgb(170 50 220 / 0.6);writing-mode: horizontal-tb;direction: rtl;<section> <div> Ceci est une boîte avec une bordure autour. </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override;}Syntaxe
border-inline-start-color: red;border-inline-start-color: #ee4141;/* Valeurs globales */border-inline-start-color: inherit;border-inline-start-color: initial;border-inline-start-color: revert;border-inline-start-color: revert-layer;border-inline-start-color: unset;Les propriétés associées sontborder-block-start-color,border-block-end-color etborder-inline-end-color, qui définissent les autres couleurs de bordure de l'élément.
Valeurs
<color>La couleur de la bordure.
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
border-inline-start-color =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
Exemples
HTML
<div> <p>Texte d'exemple</p></div>CSS
div { background-color: yellow; width: 120px; height: 120px;}.exempleTexte { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red;}Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-color |
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-color,border-right-color,border-bottom-colorouborder-left-color. - Les propriétés
writing-mode,direction,text-orientation