1. 首页
  2. CSS 菜鸟教程
  3. CSS - border-color 属性

CSS - border-color 属性

border-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>
<< CSS - border-collapse 属性 CSS - border-end-end-radius 属性 >>