border-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

border-color CSS 簡寫 屬性可以設定元素邊框的顏色。

嘗試一下 

border-color: red;

border-color: red #32a1ce;

border-color: red rgb(170 50 220 / 0.6) green;

border-color: red yellow green hsl(60 90% 50% / 0.8);

border-color: red yellow green transparent;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    這是一個周圍有邊框的方塊。
</section>

#example-element {
  background-color: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;

每個邊都可以使用 border-top-color、border-right-color、border-bottom-color 和 border-left-color 單獨設定；或使用感知書寫模式的 border-block-start-color、border-block-end-color、border-inline-start-color 和 border-inline-end-color。


你可以在使用 CSS 為 HTML 元素上色中找到更多關於邊框顏色的資訊。

組成屬性

此屬性是以下 CSS 屬性的簡寫：

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color

    • 語法

    css 
    /* <color> 值 */
border-color: red;
/* 上下 | 左右 */
border-color: red #f015ca;
/* 上 | 左右 | 下 */
border-color: red rgb(240 30 50 / 70%) green;
/* 上 | 右 | 下 | 左 */
border-color: red yellow green blue;
/* 全域值 */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

    border-color 屬性可使用一、二、三或四個值來指定。
    

  • 當指定一個值時，它會將相同的顏色應用於全部四個邊。
    • 

  • 當指定兩個值時，第一個顏色應用於上下，第二個應用於左右。
    • 

  • 當指定三個值時，第一個顏色應用於上，第二個應用於左右，第三個應用於下。
    • 

  • 當指定四個值時，顏色會依序（順時針）應用於上、右、下和左。
    • 

    <color>
    

    定義邊框的顏色。

    形式定義

    預設值 as each of the properties of the shorthand:
    Applies to all elements. It also applies to ::first-letter .
    繼承與否 no
    Computed value as each of the properties of the shorthand:
    Animation type as each of the properties of the shorthand:

    形式語法 

    border-color = 
      [ <color> | <image-1D> ]{1,4}  

    <image-1D> = 
      <stripes()>  

    <stripes()> = 
      stripes( <color-stripe># )  

    <color-stripe> = 
      <color>                            &&
      [ <length-percentage> | <flex> ]?  

    <length-percentage> = 
      <length>      |
      <percentage>

    範例

    border-color 的完整用法

    HTML

    html 
    <div id="justone">
  <p><code>border-color: red;</code> 等同於</p>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
<div id="horzvert">
  <p><code>border-color: gold red;</code> 等同於</p>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> 等同於</p>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> 等同於</p>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>

    css
    #justone {
  border-color: red;
#horzvert {
  border-color: gold red;
#topvertbott {
  border-color: red cyan gold;
#trbl {
  border-color: red cyan black gold;
/* 為所有 div 設定寬度和樣式 */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
  margin: 0;
  list-style: none;