CSS border-color 属性

CSS border-color 属性用于设置元素边框的颜色，可以单独设置元素的上、下、左、右四个边框的颜色，也可以一次性设置所有边框的颜色。border-color 属性的默认值为颜色值 #000000。

语法

border-color: color;
border-color: color1 color2 color3 color4;

属性值

单个颜色值

设置元素四条边框的颜色都相同，例如：

border-color: red;

四个颜色值

分别设置元素上、下、左、右四条边框的颜色，例如：

border-color: red green blue yellow;

三个颜色值

设置元素上、左右两条边框的颜色相同，下边框的颜色另外设置，例如：

border-color: red green blue;
border-bottom-color: black;

两个颜色值

设置元素上下、左右两个相对的边框的颜色，例如：

border-color: red green;
border-top-color: yellow;
border-right-color: blue;

继承性

border-color 属性是可继承的，当在父元素设置了 border-color 属性时，子元素将继承父元素的设置。

兼容性

CSS border-color 属性兼容性非常好。所有的主流浏览器都支持该属性，包括 Google Chrome、Firefox、Safari、Edge、Opera、Mozilla、Internet Explorer 6 及以上版本。

示例

下面是一些使用 border-color 属性的示例，以及相应的 CSS 代码。

全部设置

<div class="box"></div>

.box {
  border: 3px solid red;
  border-color: red;
}

分别设置

<div class="box"></div>

.box {
  border: 3px solid red;
  border-top-color: green;
  border-right-color: blue;
  border-bottom-color: yellow;
  border-left-color: purple;
}

总结

CSS border-color 属性是设置元素边框颜色的属性，可以单独设置元素的上、下、左、右四个边框的颜色，也可以一次性设置所有边框的颜色。border-color 属性的默认值为颜色值 #000000。三种方式分别设置四条边框的颜色，还可以将某一个边框的颜色单独设置。该属性的兼容性非常好，所有主流浏览器都支持。