border-inline-color

La propriété border-inline-color définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à border-top-color et border-bottom-color ou à border-right-color et border-left-color selon les valeurs des propriétés writing-mode, direction et text-orientation.

border-inline-color: yellow;
border-inline-color: #F5F6F7;

Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique border-block-color qui définit border-block-start-color et border-block-end-color.

Syntaxe

Valeurs

<'color'>

La couleur de la bordure. Voir color.

Syntaxe formelle

<'border-top-color'>{1,2}

Exemples

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}

HTML

<div>
  <p class="texteExemple">Texte d'exemple</p>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés physiques qui peuvent correspondre à cette propriété :
  • border-top-color,
  • border-right-color,
  • border-bottom-color,
  • border-left-color.
• Les propriétés relatives aux propriétés logiques : writing-mode, direction, text-orientation
• bug 1297097