CSS border-inline-start-color property

Previous page border-inline-start
Next Page border-inline-start-style

Definition and usage

border-inline-start-color property set the border color of the element at the beginning of its inline direction.

Note:To make border-inline-start-color The property takes effect, it must be set border-inline-start-style property.

CSS border-inline-start-color property and border-bottom-color,border-left-color,border-right-color and border-top-color The properties are very similar, but border-inline-start-color The property depends on the inline direction.

Note:and related CSS properties writing-mode,text-orientation and direction Defines the inline direction. This affects the start and end positions of a line, as well as border-inline-start-color The effect of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the color for the border at the start of the inline direction:

div {
  border-inline-start-style: solid;
  border-inline-start-color: pink;
}

Try it yourself

Example 2

using the writing-mode property

The border position at the start of the inline direction is affected by writing-mode Property effect:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-color: 5px;
}

Try it yourself

Example 3

using the direction property

The border position at the start and end of the inline direction is affected by direction Property effect:

div {
  direction: rtl;
  border-inline-start-color: hotpink;
}

Try it yourself

CSS syntax

border-inline-start-color: color|transparent|initial|inherit;

Property value

Value	Description
color	Specify the border color. The default is the current color of the element. See:CSS Color Values.
transparent	Specify that the border color should be transparent.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	The current color of the element
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineStartColor="pink"