CSS border-color 属性

主题

定义和用法

border-color 属性用于设置元素四条边框的颜色，此属性可以设置 1 到 4 种颜色值。

border-color 使用时，必须同时设置border-style属性。

border-color 默认颜色是元素自身的color值（currentColor）,可以使用transparent创建透明边框，这在布局调整时很有用。

默认值：	当前元素颜色
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS1
JavaScript 语法：	object.style.borderColor="#FF0000 blue"Demo ❯

下面通过设置不同数目的属性值，让你更直观地了解border-color属性的用法。

1. 为边框颜色设置一个属性值，即【上右下左】均为一个颜色：

实例代码运行代码

复制

div {
    border-color: red;
}

2. 为边框颜色设置两个属性值，即【上下 | 左右】分别设置颜色：

实例代码运行代码

复制

div {
    border-color: red blue;
}

3. 为边框颜色设置三个属性值，即【上 | 左右 | 下】分别设置颜色：

实例代码运行代码

复制

div {
    border-color: red green blue;
}

4. 为边框颜色设置四个属性值，即【上 | 右 | 下 | 左】分别设置颜色：

实例代码运行代码

复制

div {
    border-color: red blue green yellow;
}

border-color: color|transparent|initial|inherit;

值	描述
`color`	指定边框颜色（默认当前元素颜色）。参阅CSS 颜色值，获取完整的可能颜色值列表。
`transparent`	指定边框颜色为透明。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。