概要
CSS の border-color プロパティは、要素の 4 辺の境界線の色 ( border-top-color、border-right-color、border-bottom-color、border-left-color ) を設定するためのショートハンド・プロパティです。
| 初期値 | 以下の各プロパティのショートハンドとして補完します:
|
|---|---|
| 適用対象 | 全要素. It also applies to ::first-letter. |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 以下の各プロパティのショートハンドとして補完します:
|
| アニメーションの可否 | 以下の各プロパティのショートハンドとして補完します:
|
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
border-color: value /* 1 値構文 */
border-color: value value /* 2 値構文 */
border-color: value value value /* 3 値構文 */
border-color: value value value value /* 4 値構文 */値
1 ～ 4 つの値を指定します。指定数により、適用される方向が異なります。
- 値が 1 つの場合、全辺 に同じ値が適用される。
- 値が 2 つの場合、1 つ目は上下の、2 つ目は左右の辺に適用される。
- 値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つの場合、それぞれ上、右、下、左の順（上辺から時計回り）の辺に適用される。
- color
- 定義済の色名、もしくは各形式のカラーコードを指定。指定可能な値については
<color>を参照して下さい。 - inherit
- 親要素の
border-colorの計算値を継承
※境界線を表示するには、最低限、 border-style を設定する必要があります。
例
pre {
border-style: ridge dashed solid;
border-color: orange blue;
border-width: 6px;
}
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-color の定義 |
勧告候補 | The transparent keyword has been removed as it is now a part of the <color> data type. |
| CSS Level 2 (Revision 1) border-color の定義 |
勧告 | ショートハンドプロパティと定義された |
| CSS Level 1 border-color の定義 （※日本語訳） |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) [1] | 4.0 | 3.5 | 1.0 (85) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 1.0 (1.9.2) [1] | ? | ? | ? |
[1] Firefox のような Gecko ベースのブラウザでは、Mozilla の先行拡張機能として、複数の色を境界線に設定できます。
-moz-border-top-colors 、 -moz-border-right-colors 、 -moz-border-bottom-colors 、 -moz-border-left-colors
関連情報
- Border-color 関連 CSS プロパティ:
border、border-top-color、border-right-color、border-bottom-color、border-left-color - その他の border 関連 CSS プロパティ:
border-width、border-style