border-color属性是用于设置一个元素的上右下左4个边框颜色的简写属性。border-color属性可以同时设置一个元素的border-left-color、border-right-color、border-top-color和border-bottom-color属性。
border-color属性的值可以是1个、2个、3个或4个。
如果为border-color属性设置一个值，那么上下左右4条边的颜色都使用这个值来指定的颜色。
如果为border-color属性设置两个值，那么第一个值指定上下两条边的颜色，第二个值指定左右两条边的颜色。
如果为border-color属性设置三个值，那么第一个值指定上边框的颜色，第二个值指定左右两条边框的颜色，第三个值指定下边框的颜色。
如果为border-color属性指定4个值，那么这4个值分别按上、右、下、左的顺序为各条边框指定颜色。
官方语法
border-color: {1,4}
参数：
：有效的CSS颜色值。参考数据类型的说明。
border-color属性的初始值为它包含的各条边框的边框颜色的初始值：
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。
相关阅读
