Style borderColor 属性
页面下方有更多实例。
定义和用法
borderColor 属性设置或返回元素边框的颜色。
该属性可使用 1 到 4 种颜色:
- 如果规定一种颜色，比如:p {border-color: red} - 所有四个边框都是红色。
- 如果规定两种颜色，比如:p {border-color: red transparent} - 上边框和下边框是红色，而左边框和右边框是透明的。
- 如果规定三种颜色，比如:p {border-color: red green blue}- 上边框是红色，左边框和右边框是绿色，下边框是蓝色。
- 如果规定四种颜色，比如:p {border-color: red green blue yellow} - 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
语法
返回 borderColor 属性:
object.style.borderColor
设置 borderColor 属性:
object.style.borderColor = "color|transparent|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| color | 规定边框的颜色。在 CSS 颜色值 中寻找可能的颜色值的完整列表。 |
| transparent | 默认。边框的颜色是透明的（基本内容将会穿透）。 |
| initial | 设置该属性为它的默认值。请参阅 initial |
| inherit | 从父元素继承该属性。请参阅 inherit |
技术细节
| 默认值: | current color |
|---|---|
| 返回值: | 字符串，表示元素边框的颜色 |
| CSS 版本 | CSS1 |
更多实例
实例
将 <div> 元素的顶部和底部边框的颜色更改为绿色，将左侧和右侧边框的颜色更改为紫色:
document.getElementById("myDiv").style.borderColor = "green purple";
亲自试一试 »
相关页面
CSS 教程: CSS Border
CSS 参考手册: border-color 属性
HTML DOM 参考手册: border 属性
❮ Style 对象
