border-inline-end-color

La propriété border-inline-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés border-top-color, border-right-color, border-bottom-color ou border-left-color selon les valeurs des propriétés writing-mode, direction et text-orientation.

Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :

• border-block-start-color,
• border-block-end-color,
• border-inline-start-color.

Syntaxe

border-inline-end-color: red;
border-inline-end-color: #fffff;
border-inline-end-color: rgb(200, 0, 0);

border-inline-end-color: unset;
border-inline-end-color: initial;
border-inline-end-color: inherit;

Valeurs

<'border-color'>

Voir border-color

Syntaxe formelle

<'color'>
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

CSS

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

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

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs

[1] Disponible depuis Gecko 38 via la préférence layout.css.vertical-text.enabled ensuite désactivée par défaut.

[2] Avant Gecko 38 (après également), cette propriété existe dans une version préfixée -moz-border-end-color.

Voir aussi

• Les propriétés physiques correspondantes :
  • border-top-color,
  • border-right-color,
  • border-bottom-color,
  • border-left-color.
• writing-mode, direction, text-orientation