border-color属性是用于设置一个元素的上右下左4个边框颜色的简写属性。border-color属性可以同时设置一个元素的、、和属性。

border-color属性的值可以是1个、2个、3个或4个。

如果为border-color属性设置一个值，那么上下左右4条边的颜色都使用这个值来指定的颜色。

如果为border-color属性设置两个值，那么第一个值指定上下两条边的颜色，第二个值指定左右两条边的颜色。

如果为border-color属性设置三个值，那么第一个值指定上边框的颜色，第二个值指定左右两条边框的颜色，第三个值指定下边框的颜色。

如果为border-color属性指定4个值，那么这4个值分别按上、右、下、左的顺序为各条边框指定颜色。

官方语法

border-color: <color>{1,4}
                            

参数：

• <color>：有效的CSS颜色值。参考数据类型的说明。

border-color属性的初始值为它包含的各条边框的边框颜色的初始值：

• ：currentColor
• ：currentColor
• ：currentColor
• ：currentColor

border-color属性可以使用inherit关键字来继承其父元素边框的颜色。

应用范围

border-color属性可以应用在所有的元素上。

示例代码

下面是border-color属性取值的示例代码：

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

/* border-color: 上下 左右 双值语法*/
border-color: red #f015ca;

/* border-color: 上 左右 下  三值语法 */
border-color: red yellow green;

/* border-color: 上 右 下 左  四值语法 */
border-color: red yellow green blue;

border-color: inherit                           
                            

在线演示

下面的例子使用border-color属性为元素设置不同的边框颜色。

.container{
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  height: 350px;
  border-style: solid;
  border-width: 30px;
  border-color: #e93e30 #52b529 #f8c63d #377ef0;
}                              
                            

浏览器支持

所有的现代浏览器都支持border-color属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。