CSS 属性

border-color 属性允许您更改元素周围边框的颜色。您可以使用属性单独更改元素边框的底部、左侧、顶部和右侧的颜色 -

属性值

  • <color>: 任何有效的颜色值。

  • transparent: 将边框设置为不可见。

适用范围

所有 HTML 元素。

语法

object.style.borderColor = "red";
始终声明 border-style 属性位于 border-color 属性之前。

CSS border-color: <color> 

这里是显示所有这些效果的示例properties -

<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">
      此示例以不同颜色显示所有边框。
   </p>

   <p class = "example2">
      此示例仅以绿色显示所有边框。
   </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> 有四个不同的值。
   </p>
   <p class = "example2">
      <i>border-color</i> 有三个不同的值。
   </p>
   <p class = "example3">
      <i>border-color</i> 有两个不同的值。
   </p>
   <p class = "example4">
      <i>border-color</i> 有一个值。
   </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>