CSS 边框颜色

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

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

名称 - 指定一个颜色名称，例如 "red"
HEX - 指定一个 HEX 值，例如 "#ff0000"
RGB - 指定一个 RGB 值，例如 "rgb(255,0,0)"
HSL - 指定一个 HSL 值，例如 "hsl(0, 100%, 50%)"
transparent

注意： 如果没有设置 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;
}

结果

红色边框

绿色边框

蓝色边框

自己尝试 »

特定边颜色

border-color 属性可以有 1 到 4 个值（分别对应顶部边框、右侧边框、底部边框和左侧边框）。

示例

p.one {
border-style: solid;
border-color: red green blue yellow; /* 顶部红色，右侧绿色，底部蓝色，左侧黄色 */
}

自己尝试 »

HEX 值

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

示例

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

自己尝试 »

RGB 值

或者使用 RGB 值

示例

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

自己尝试 »

HSL 值

您也可以使用 HSL 值

示例

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

自己尝试 »

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

★ +1

W3schools Pathfinder

Track your progress - it's free!

CSS 教程

CSS 高级

CSS 响应式

CSS 网格

CSS SASS

CSS 示例

CSS 参考

CSS 边框颜色