border-color · CSS基础

## border-color 属性 ### 属性定义及使用说明 border-color属性属性设置四条边框的颜色,此属性可设置 1 到 4 种颜色。 border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：实例: **border-color:红，绿，蓝,粉红色;** * 上边框是红色 * 右边框是绿色 * 底部边框是蓝 * 左边框是粉红色 **border-color：红，绿，蓝;** * 上边框是红色 * 左，右边框是绿色 * 底部边框是蓝 **border-color：红，绿;** * 顶部和底部边框是红色 * 左右边框是绿色 **border-color：红色;** * 所有四个边框是红色 **注意：**请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。 JavaScript 语法:object object.style.borderColor="#FF0000 blue" ## 属性值 | 值 | 说明 | | :-- | :-- | | *color* | 指定背景颜色。在[CSS颜色值](https://www.w3cschool.cn/cssref/css-colors-legal.html)查找颜色值的完整列表 | | transparent | 指定边框的颜色应该是透明的。这是默认 | | inherit | 指定边框的颜色，应该从父元素继承 | ## [在线实例](https://www.w3cschool.cn/cssref/pr-border-color.html) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> p.one { border-style:solid; border-color:#0000ff; } p.two { border-style:solid; border-color:#ff0000 #0000ff; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> <body> One-colored border! Two-colored border! Three-colored border! Four-colored border! 注意: "border-color" 属性如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders . </body> </html> ```