CSS border-inline-start-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-start-color CSS property is used to define the color of the inline start border of an element. The inline start border is the border on the side of the element that corresponds to the text direction, which is typically the left border in left-to-right languages like English and the right border in right-to-left languages like Arabic. This property allows web developers to specify the color of this specific border, giving them precise control over the visual appearance of borders in different text directions, which can be particularly useful for multilingual websites or complex layouts where text direction may change.

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

Interactive Demo

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

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

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

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

Example of the Border
Inline Start Color Property

Syntax

border-inline-start-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-start: 4px dashed;
  border-inline-start-color: blue;
}

Result

Editor