Style borderColor 属性

定义和用法

borderColor 属性设置或返回元素边框的颜色。

此属性可以采用一到四个值：

  • 一个值，例如：p {border-color: red} - 所有四个边框都是红色
  • 两个值，例如：p {border-color: red transparent} - 上下边框为红色，左右边框为透明
  • 三个值，例如：p {border-color: red green blue}- 上边框为红色，左右边框为绿色，下边框为蓝色
  • 四个值，例如：p {border-color: red green blue yellow} - 上边框为红色，右边框为绿色，下边框为蓝色，左边框为黄色

另请参阅：

CSS 教程：CSS 边框

CSS 参考手册：border-color 属性

HTML DOM 参考手册：border 属性

实例

例子 1

将 <div> 元素的四个边框的颜色更改为红色：

document.getElementById("myDiv").style.borderColor = "red";

亲自试一试

例子 2

将 <div> 元素的上下边框的颜色更改为绿色，将左右边框的颜色更改为紫色：

document.getElementById("myDiv").style.borderColor = "green purple";

亲自试一试

例子 3

返回 <div> 元素的边框颜色：

alert(document.getElementById("myDiv").style.borderColor);

亲自试一试

语法

返回 borderColor 属性：

object.style.borderColor

设置 borderColor 属性：

object.style.borderColor = "color|transparent|initial|inherit"

属性值

值 描述
color

规定边框的颜色。默认颜色为黑色。

请查看 CSS 颜色值，获取可能的颜色值的完整列表。
transparent 边框的颜色是透明的（底层内容会透出来）。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： black
返回值： 字符串，表示元素边框的颜色。
CSS 版本： CSS1

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5