上查看所有课程
CSS border-color 属性为元素的边框添加颜色。例如，
h1 {
border-style: solid;
border-color: orange;
}浏览器输出
在此，border-color 属性为 h1 元素添加了 orange 作为边框颜色。
CSS border-color 语法
border-color 属性的语法如下：
border-color: color | transparent;这里，
color：以任何格式指定颜色值，例如颜色名称、HEX、RGB和HSLtransparent：将边框颜色设置为透明
CSS border-color 示例
让我们看一个 border-color 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-color</title>
</head>
<body>
<p class="border-blue">border-color: blue;</p>
<p class="border-green">border-color: rgb(0, 255, 0);</p>
<p class="border-red">border-color: #ff0000;</p>
</body>
</html>p {
/* sets the border style to solid */
border-style: solid;
padding: 8px;
}
p.border-blue {
/* adds color using color name */
border-color: blue;
}
p.border-green {
/* adds color in RGB color format */
border-color: rgb(0, 255, 0);
}
p.border-red {
/* adds color in the hexadecimal color format */
border-color: #ff0000;
}浏览器输出
CSS border-color 属性作为简写
我们可以使用 border-color 属性为边框的一侧或全部四侧着色。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-color</title>
</head>
<body>
<p class="one-value">border-color: blue;</p>
<p class="two-value">border-color: blue orange;</p>
<p class="three-value">border-color: blue orange red;</p>
<p class="four-value">border-color: blue orange red green;</p>
</body>
</html>p {
/* adds border style to solid */
border-style: solid;
border-width: 8px;
padding: 8px;
}
p.one-value {
/* adds all side border colors to blue */
border-color: blue;
}
p.two-value {
/* sets top/bottom border to blue, left/right border to orange */
border-color: blue orange;
}
p.three-value {
/* sets top border to blue, left/right border to orange, bottom border to red */
border-color: blue orange red;
}
p.four-value {
/* sets top border to blue, right border to orange, bottom border to red, left border to green */
border-color: blue orange red green;
}浏览器输出
CSS border-color 组成属性
CSS
border-top-color 属性border-top-color 属性为元素的顶部边框添加颜色。例如，
p {
border-top-color: blue;
}浏览器输出
CSS
border-right-color 属性border-right-color 属性为元素的右侧边框添加颜色。例如，
p {
border-right-color: blue;
}浏览器输出
CSS
border-bottom-color 属性border-bottom-color 属性为元素的底部边框添加颜色。例如，
p {
border-bottom-color: blue;
}浏览器输出
CSS
border-left-color 属性border-left-color 属性为元素的左侧边框添加颜色。例如，
p {
border-left-color: blue;
}浏览器输出
