CSS border-color 属性 · W3School CSS 参考手册

# CSS border-color 属性 ## 实例设置 4 个边框的颜色： ``` p { border-style:solid; border-color:#ff0000 #0000ff; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 border-color 属性。注释：Internet Explorer 6（以及更早的版本）不支持属性值 "transparent"。注释：IE7 以及更早版本的浏览器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。 ## 定义和用法 border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。 border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子： #### 例子 1 ``` border-color:red green blue pink; ``` * 上边框是红色 * 右边框是绿色 * 下边框是蓝色 * 左边框是粉色 #### 例子 2 ``` border-color:red green blue; ``` * 上边框是红色 * 右边框和左边框是绿色 * 下边框是蓝色 #### 例子 3 ``` border-color:dotted red green; ``` * 上边框和下边框是红色 * 右边框和左边框是绿色 #### 例子 4 ``` border-color:red; ``` * 所有 4 个边框都是红色要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。 | 默认值： | _not specified_ | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 语法： | _object_.style.borderColor="#FF0000 blue" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | *color_name* | 规定颜色值为颜色名称的边框颜色（比如 red）。 | | *hex_number* | 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 | | *rgb_number* | 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 | | transparent | 默认值。边框颜色为透明。 | | inherit | 规定应该从父元素继承边框颜色。 | ## TIY 实例 [设置四个边框的颜色](/tiy/t.asp?f=csse_border-color) 本例演示如何设置四个边框的颜色。可以设置一到四种颜色。 ``` <html> <head> <style type="text/css"> 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-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 </body> </html> ``` ## 相关页面 CSS 教程：[CSS 边框](/css/css_border.asp "CSS 边框") HTML DOM 参考手册：[borderColor 属性](/jsref/prop_style_bordercolor.asp "HTML DOM borderColor 属性")