CSS 边框颜色

这个border-color属性用于设置四个边框的颜色。

颜色可以通过以下方式设置：

name - 指定颜色名称，例如"red"
HEX - 指定一个十六进制值，例如"#ff0000"
RGB - 指定 RGB 值，例如"rgb(255,0,0)"
HSL - 指定 HSL 值，例如"hsl(0, 100%, 50%)"
透明的

笔记：如果border-color未设置，它继承元素的颜色。

示例

不同边框颜色的演示：

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

结果：

Red border

Green border

Blue border

亲自试一试 »

特定侧面颜色

这个border-color属性可以具有一到四个值（对于上边框、右边框、下边框和左边框）。

示例

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

亲自试一试 »

十六进制值

边框的颜色也可以使用十六进制值 (HEX) 指定：

示例

p.one {
border-style: solid;
border-color: #ff0000; /* red */
}

亲自试一试 »

RGB 值

或者使用 RGB 值：

示例

p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}

亲自试一试 »

HSL 值

您还可以使用 HSL 值：

示例

p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

亲自试一试 »

您可以在我们的文章中了解有关 HEX、RGB 和 HSL 值的更多信息CSS 颜色章节。