CSS border-top-color 属性

CSS border-top-color 属性可以为元素的顶部边框指定颜色。顶部边框是垂直于元素的边框的一部分，它是元素边框的四个部分之一。

语法

border-top-color: color;

其中，color 可以是十六进制颜色值、RGB、RGBA、HSL、HSLA 或者预定义颜色名称。

默认值

默认值为当前文本颜色。

取值

border-top-color 的取值方式和颜色值相似，可以有以下几种情况：

• 颜色值：使用十六进制、RGB、RGBA、HSL、HSLA 或预定义颜色名称；
• transparent：为透明；
• currentColor：与当前文本颜色相同；
• inherit：从父级元素继承。

实例

div{
    border: 2px solid #eaeaea;
    border-top-color: red;
}

该示例代码为 div 元素添加了一条 2 像素粗的红色顶部边框。其他三条边框的颜色均为 #eaeaea。

注意事项

• border-top-color 只能设置顶部边框的颜色，而不能同时设置其他三个边框的颜色。
• 如果某个方向的边框颜色没有被定义，那么会继承其他边框的颜色，或者默认使用当前文本颜色。
• 当设置了 border-top-style 属性时，该属性才会起作用。如果未设置 border-top-style，则不会显示顶部边框，因此无法设置其颜色。

浏览器兼容性

border-top-color 属性的兼容性良好，常见的浏览器均支持该属性。如果对浏览器的兼容性有疑虑，可以采用 CSS 预编译器生成相应的浏览器前缀，例如：

div{
    -webkit-border-top-color: red;
    -moz-border-top-color: red;
    -o-border-top-color: red;
    border-top-color: red;
}

以上代码可以确保各种浏览器均能正确识别 border-top-color 属性。