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 雖可一次設定四邊框線色彩,但每個邊框亦可用以下屬性分別指定:border-top-colorborder-right-colorborder-bottom-colorborder-left-color;能因應文字書寫方向改變框線相對位置(the writing mode-aware)的屬性如:border-block-start-colorborder-block-end-colorborder-inline-start-colorborder-inline-end-color,也可達成分別指定的功能。

關於更多邊框色彩的設定說明,請見 CSS 顏色

Constituent properties 屬性組成

border-color 簡寫的屬性值內容由以下 CSS 的屬性值構成。

語法

css
/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240, 30, 50, 0.7) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

border-color 屬性值可設定一到四個輸入值。

  • 一個值:將單一顏色指定給全部四個邊
  • 兩個值:依顏色排列順序分別指定給:上下邊左右邊
  • 三個值:依顏色排列順序分別指定給:上邊框左右邊下邊框
  • 四個值:依顏色排列順序,沿邊框順時鐘方向,分別指定給:上邊框右邊框下邊框左邊框

屬性值

<color>

定義框線的顏色。

Formal definition 語法定義

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

Formal syntax 語法規則

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> is equivalent to</p>
  <ul>
    <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>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <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>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <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>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <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>
  </ul>
</div>

CSS

css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* 設定每個div的邊框與樣式 */
/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

成果

規範

Specification
CSS Logical Properties and Values Level 1
# logical-shorthand-keyword
CSS Backgrounds and Borders Module Level 3
# border-color

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見