目录

CSS border-color 属性


示例

设置边框颜色:

div {border-color: coral;}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个border-color属性设置元素的四个边框的颜色。该属性可以有一到四个值。

如果 border-color 属性有四个值:

  • 边框颜色:红绿蓝粉红;
    • 顶部边框为红色
    • 右边框是绿色的
    • 底部边框是蓝色的
    • 左边框是粉红色的

如果 border-color 属性具有三个值:

  • 边框颜色:红绿蓝;
    • 顶部边框为红色
    • 左右边框为绿色
    • 底部边框是蓝色的

如果 border-color 属性有两个值:

  • 边框颜色:红绿;
    • 顶部和底部边框为红色
    • 左右边框为绿色

如果 border-color 属性只有一个值:

  • 边框颜色:红色;
    • 所有四个边框都是红色的

笔记:始终声明边框式之前的属性border-color属性。元素必须有边框才能更改颜色。

展示演示❯

默认值: 元素的当前颜色
遗传:
可动画: 是的。阅读可动画的尝试一下
版本: CSS1
JavaScript 语法: 对象.style.borderColor="#FF0000 blue"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
border-color 1.0 4.0 1.0 1.0 3.5


CSS 语法

border-color: color|transparent|initial|inherit;

属性值

Value Description Demo
color Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element Demo ❯
transparent Specifies that the border color should be transparent Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

使用十六进制值设置边框颜色:

div {border-color: #92a8d1;}
亲自试一试 »

示例

使用 RGB 值设置边框颜色:

div {border-color: rgb(201, 76, 76);}
亲自试一试 »

示例

使用 RGBA 值设置边框颜色:

div {border-color: rgba(201, 76, 76, 0.3);}
亲自试一试 »

示例

使用 HSL 值设置边框颜色:

div {border-color: hsl(89, 43%, 51%);}
亲自试一试 »

示例

使用 HSLA 值设置边框颜色:

div {border-color: hsla(89, 43%, 51%, 0.3);}
亲自试一试 »

示例

为元素的每一侧设置不同的边框颜色:

div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}
亲自试一试 »

相关页面

CSS教程:CSS 边框

HTML DOM 参考:borderColor 属性