border-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概括

CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性: border-top-colorborder-right-colorborder-bottom-colorborder-left-color

初始值该简写所对应的每个属性:
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

语法

css
/* border-color: color; 单值语法 */
border-color: red;

/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;

border-color: inherit;

取值

color

使用 <color> 来表示四个边框的颜色,仅用于单值语法。

horizontal

使用 <color> 来表示水平(左边框和右边框)边框的颜色,仅用于双值语法。

vertical

使用 <color> 来表示垂直(上边框和下边框)边框的颜色,仅用于双值或三值语法。

top

使用 <color> 来表示上边框的颜色,仅用于三值或四值语法。

bottom

使用 <color> 来表示下边框的颜色,仅用于三值或四值语法。

使用 <color> 来表示右边框的颜色,仅用于四值语法。

left

使用 <color> 来表示左边框的颜色,仅用于四值语法。

inherit

这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。

语法定义

border-color = 
[ <color> | <image-1D> ]{1,4}

<image-1D> =
<stripes()>

<stripes()> =
stripes( <color-stripe># )

<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?

<length-percentage> =
<length> |
<percentage>

Complete_border-color_usage2

HTML

html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

规范

Specification
CSS Logical Properties and Values Level 1
# logical-shorthand-keyword
CSS Backgrounds and Borders Module Level 3
# border-color

浏览器兼容性

BCD tables only load in the browser

其他参考