border-inline-color - CSS（层叠样式表） 编辑

The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

border-inline-color: yellow;
border-inline-color: #F5F6F7;

The border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color.

Syntax

Values

<'color'>

The color of the border. See color.

Formal definition

初始值	currentcolor
适用元素	all elements
是否是继承属性	否
计算值	computed color
Animation type	discrete

Formal syntax

<'border-top-color'>{1,2}

Examples

Border color with vertical text

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}

Results

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1 border-inline-color	Editor's Draft	Initial definition

Browser compatibility

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• This property maps to the physical border properties: border-top-color, border-right-color, border-bottom-color, or border-left-color.
• writing-mode, direction, text-orientation+ bug 1297097