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-color、border-right-color、border-bottom-color、border-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

浏览器兼容性

其他参考