border html5样式,CSS属性参考 | border-color

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。

相关阅读