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 雖可一次設定四邊框線色彩,但每個邊框亦可用以下屬性分別指定:border-top-color
、border-right-color
、border-bottom-color
、border-left-color
;能因應文字書寫方向改變框線相對位置(the writing mode-aware)的屬性如:border-block-start-color
、border-block-end-color
、border-inline-start-color
、border-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 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: |
Formal syntax 語法規則
範例
完整的 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 |
瀏覽器相容性
BCD tables only load in the browser
參見
- 與 border-color 相關的 CSS 屬性:
border
、border-top-color
、border-right-color
、border-bottom-color
、border-left-color
。 - 其他框線屬性:
border-width
、border-style
- 資料型態
<color>
- 其他顏色相關屬性:
color
、background-color
、outline-color
、text-decoration-color
、text-emphasis-color
、text-shadow
、caret-color
、column-rule-color
- 以 CSS 指定 HTML 元件的顏色