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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

其他参考