CSS border-inline-end-color attribute

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

Definition and usage

border-inline-end-color Set the border color at the end of the inline direction of the element's property.

Note:To make border-inline-end-color The property must be set for it to take effect. border-inline-end-style Property.

CSS border-inline-end-color attributes are related to border-bottom-color,border-left-color,border-right-color and border-top-color The attributes are very similar, but border-inline-end-color The attribute 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-end-color The effect of the attribute. 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 inline direction end border:

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

Try it yourself

Example 2: Combined with the writing-mode attribute

The position of the inline direction end border is affected by writing-mode The impact of the attribute:

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

Try it yourself

Example 3: Combined with the direction attribute

The position of the inline direction end border is affected by direction The impact of the attribute:

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

Try it yourself

CSS syntax

border-inline-end-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 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.borderInlineEndColor="pink"