border-color

概要

CSS の border-color プロパティは、要素の 4 辺の境界線の色 ( border-top-colorborder-right-colorborder-bottom-colorborder-left-color ) を設定するためのショートハンド・プロパティです。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素. It also applies to ::first-letter.
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • border-bottom-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
  • border-left-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
  • border-right-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
  • border-top-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Sebastianz, ethertank, Yuichiro
 最終更新者: Sebastianz,