CSS border-inline-color Attribute

Previous Page border-inline
Next Page border-inline-end

Definition and usage

border-inline-color The property sets the border color of the element in the inline direction.

related CSS propertiesTo make border-inline-color The property takes effect, it must be set border-inline-style.

border-inline-color The value of the property can be set in different ways:

If border-inline-color The property has two values:

border-inline-color: pink blue;

The border color at the start of the inline element is pink
The border color at the end of the inline element is blue

If border-inline-color The property has a value:

border-inline-color: blue;

The border color at the start and end of the inline element is blue

of CSS border-inline-color property with border-bottom-color,border-left-color,border-right-color and border-top-color The properties are very similar, but border-inline-color Note:

related CSS propertiesand 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-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 in the inline direction:

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

Try It Yourself

Example 2: Combined with the writing-mode property

The borders at the start and end positions of the inline direction are affected by writing-mode The Effect of the Property:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Try It Yourself

Example 3: Combined with the direction property

The borders at the start and end positions of the inline direction are affected by direction The Effect of the Property:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
color	Specify the border color. The default color is the current color of the element. View CSS color values to get a complete list of possible 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.borderInlineColor="pink"