CSS border-inline-color egenskap

Föregående sida border-inline
Nästa sida border-inline-end

定义和用法

border-inline-color 属性设置元素在行内方向上的边框颜色。

Note:要使 border-inline-color 属性生效，必须设置 border-inline-style.

border-inline-color 属性的值可以通过不同方式设置：

如果 border-inline-color 属性有两个值：

border-inline-color: pink blue;

行内起始处的边框颜色为粉色
行内结束处的边框颜色为蓝色

如果 border-inline-color 属性有一个值：

border-inline-color: blue;

行内起始处和结束处的边框颜色均为蓝色

CSS 的 border-inline-color 属性与 border-bottom-color,border-left-color,border-right-color and border-top-color The attributes are very similar, but border-inline-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 starting and ending positions of a line, as well as border-inline-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 borders:

#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 attribute

The borders at the starting and ending positions of the inline direction are affected by writing-mode The effect of the attribute:

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

Try it yourself

Example 3: Combined with the direction attribute

The borders at the starting and ending positions of the inline direction are affected by direction The effect of the attribute:

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

Try it yourself

CSS syntax

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

Attribute value

Value	Description
color	Specify the border color. The default color is the element's current color. 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"