border-color 属性允许您更改元素周围边框的颜色。您可以使用属性单独更改元素边框的底部、左侧、顶部和右侧的颜色 -
- border-bottom-color 更改底部边框的颜色。
- border-top-color 更改顶部边框的颜色。
- border-left-color 更改左边框的颜色。
- border-right-color 更改右边框的颜色。
可能的值
- <color> - 任何有效的颜色值。
- transparent - 将边框设置为不可见。
适用于
所有 HTML 元素。
语法
object.style.borderColor = "red";
始终在 border-color 属性之前声明 border-style 属性。
CSS border-color - <color> 值
以下示例显示了所有这些属性的效果 -
<html>
<head>
<style>
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>
CSS border-color - 有四个值
border-color 属性可以有四个值、三个值、两个值或一个值，如以下示例所示：
<html>
<head>
<style>
p.example1 {
border:4px solid;
border-color:red blue green yellow;
}
p.example2 {
border:4px solid;
border-color:red blue green;
}
p.example3 {
border:4px solid;
border-color:alice aqua;
}
p.example4 {
border:4px solid;
border-color:red;
}
</style>
</head>
<body>
<p class = "example1">
<i>border-color</i> with four different values.
</p>
<p class = "example2">
<i>border-color</i> with three different values.
</p>
<p class = "example3">
<i>border-color</i> with two different values.
</p>
<p class = "example4">
<i>border-color</i> with one value.
</p>
</body>
</html>
CSS border-color - 具有任何类型的颜色值
我们可以传递任何类型的颜色值，从命名颜色到十六进制、RGB 和 RGBA 值，如下所示 -
<html>
<head>
<style >
p {
border-style: solid; border-width: thick;
border-color: green rgb(201, 76, 76) #808080 rgba(201, 76, 76, 0.3);
}
</style>
</head>
<body>
<p class = "example1">
<i>border-color</i> with four different color types (named, RGB ,hex, RGBA)!!
</p>
</body>
</html>
