CSS border-inline-end-color Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-inline-end-color is a CSS property used to define the color of the border on the inline-end side of an element, which depends on the writing mode and direction of the text. In a left-to-right language like English, it would control the color of the right border, while in a right-to-left language like Arabic, it would affect the left border. This property is part of the CSS Logical Properties and Values Module, introduced to make web design more adaptable to various writing directions and languages, allowing developers to create more flexible and responsive layouts.

Initial value: currentcolor
Applies to: all elements
Inherited: no
Computed value: computed color
Animatable: by computed value type
JavaScript syntax: object.style.borderInlineEndColor

Interactive Demo

border-inline-end-color: green;
writing-mode: horizontal-tb;

border-inline-end-color: #E1341E;
writing-mode: vertical-rl;

border-inline-end-color: rgb(106, 46, 203);
writing-mode: horizontal-tb;

border-inline-end-color: hsl(197, 63%, 49%);
writing-mode: vertical-lr;

Example of the Border
Inline End Color Property

Syntax

border-inline-end-color: <color>

Values

<color>Specifies the color of the border

Example

HTML

<div>This is a box with a border around it.</div>

CSS

div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline-end: 4px dashed;
  border-inline-end-color: green;
}

Result

Editor