CSS 中的 border-color 属性

cssweb developmentfront end technology更新于 2025/2/6 9:16:17

CSS border-color 属性用于指定元素的边框颜色。我们还可以使用 border-top-color、border-right-color、border-left-color 和 border-right-color 属性设置各个边的颜色。

语法

CSS border-color 属性的语法如下 −

Selector {
   border-color: /*value*/
}

以下示例说明了 CSS border-color 属性 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
span {
   margin: 10px;
   padding: 20px;
   border-style: solid;
   border-color: limegreen lightblue crimson;
}
div {
   text-align: center;
   border-style: solid;
   border-color: palevioletred steelblue;
   height: 16px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>Demo</div>
<p><span>This</span>is demo text just for displaying how CSS styles works.</p>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
li {
   border-bottom-color: cyan;
   border-bottom-style: dotted;
   width: 300px;
}
p {
   text-align: center;
   border-width: 8px;
   border-style: solid;
   border-color: #d11c74;
   border-left-style: ridge;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html>