CSS - border-color 屬性

CSS 的 border-color 屬性允許您設定元素四個邊框的顏色。您可以根據提供的數值指定每個邊框的不同顏色。必須定義 border-style。

語法

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

屬性值

值	描述
color	它指定邊框的顏色。可以使用不同的顏色格式（名稱、rgb 值、十六進位制值、hsl 值等）。預設顏色是元素的當前顏色。
transparent	它指定邊框必須是透明的。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 邊框顏色屬性示例

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

使用顏色名稱設定邊框顏色

可以使用顏色名稱設定邊框的顏色。在以下示例中，給出了不同數量的顏色值，並使用顏色名稱設定了邊框顏色。

示例

<!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>

使用十六進位制值設定邊框顏色

可以使用十六進位制值設定邊框的顏色。在以下示例中，給出了不同數量的顏色值，並使用十六進位制值設定了邊框顏色。

示例

<!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 值設定了邊框顏色。

示例

<!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 值設定了邊框顏色。

示例

<!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 值。

示例

<!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

列印頁面