border-color
============

概括
--

CSS 属性 **`border-color`** 是一个用于设置元素四个边框颜色的快捷属性： `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color`。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-bottom-color`: computed color
* `border-left-color`: computed color
* `border-right-color`: computed color
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-left-color`: a color
* `border-right-color`: a color
* `border-top-color`: a color
 |

语法
--


```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>` 来表示下边框的颜色，仅用于三值或四值语法。

`right`

使用 `<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 with JavaScript enabled. Enable JavaScript to view data.

其他参考
----

* 与 border-color 相关的 CSS 属性：`border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`,
* 与边框相关的其他 CSS 属性：`border-width`, `border-style`