CSS - border-color 属性

CSS 的 border-color 属性允许您设置元素四个边框的颜色。您可以根据提供的数值指定每个边框的不同颜色。必须定义 border-style。

语法

border-color: color | transparent | initial | inherit;

属性值

值	描述
color	它指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色是元素的当前颜色。
transparent	它指定边框必须是透明的。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 边框颜色属性示例

以下示例使用不同的值解释了 border-color 属性。

使用颜色名称设置边框颜色

可以使用颜色名称设置边框的颜色。在以下示例中，给出了不同数量的颜色值，并使用颜色名称设置了边框颜色。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red;
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red blue;
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red green blue;
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red green orange blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

使用十六进制值设置边框颜色

可以使用十六进制值设置边框的颜色。在以下示例中，给出了不同数量的颜色值，并使用十六进制值设置了边框颜色。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33;
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33 #ff6600;
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33 #ffff66 #ff6600;
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33  #ffff66 #669900 #ff6600;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

使用 RGB 值设置边框颜色

可以使用 rgb 值设置边框的颜色。在以下示例中，给出了不同数量的颜色值，并使用 rgb 值设置了边框颜色。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255);
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255) rgb(255, 80, 80);
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255) rgb(102, 0, 255) 
         rgb(255, 80, 80);
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255)  rgb(102, 0, 255) 
         rgb(102, 0, 102) rgb(255, 80, 80);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders 
      in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

使用 HSL 值设置边框颜色

可以使用 hsl 值设置边框的颜色。在以下示例中，给出了不同数量的颜色值，并使用 hsl 值设置了边框颜色。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%);
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%) hsl(330, 50%, 40%);
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%) hsl(24, 100%, 50%) 
         hsl(330, 50%, 40%);
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%)  hsl(24, 100%, 50%) 
         hsl(30, 100%, 40%) hsl(330, 50%, 40%);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders 
      in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

注意：不同数量的值对边框颜色属性的影响不同。

一个值：如果给出一个颜色值，则将其应用于所有四个边框。
两个值：如果给出两个值，则第一个颜色应用于顶部和底部边框，第二个颜色应用于左侧和右侧边框。
三个值：如果给出三个值，则第一个颜色用于顶部边框，第二个颜色用于左侧和右侧边框，第三个颜色用于底部边框。
四个值：如果给出四个值，则第一个颜色用于顶部边框，第二个颜色用于右侧边框，第三个颜色用于底部边框，第四个颜色用于左侧边框。

使用透明值设置边框颜色

要获得透明边框，我们使用 transparent 值。在以下示例中，使用了 transparent 值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      #transparent {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: transparent;
      }

      
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="transparent">
      This example shows transparent borders.
   </p>
</body>

</html>

支持的浏览器

属性
border-color	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面