border-color

border-colorプロパティは上下左右の四辺のボーダー(枠線)の色をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。

初期値
colorプロパティの値
適用対象
すべての要素(分離ボーダーモデルの表のうち列・列グループ・行・行グループ要素を除く)
継承
しない
メディア
visual

border-colorプロパティの値

値には <色>、または "transparent" のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。値を1つだけ指定した場合は、その色が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。border-colorプロパティに指定できる値は、それぞれ以下の意味を示します。

<色>
RGB値カラーネームなどでボーダーの色を指定する。
transparent
ボーダーの色を透過させる。ボーダーは透明であるが、border-widthプロパティの値分のボーダーの幅はスペースとして空くことになる。なお、当該要素に背景が指定されていれば、ボーダー分のスペースには、その背景が反映されることになる。

border-widthプロパティ0以外の値)と border-styleプロパティ("none" 以外の値)が指定されおり、border-colorプロパティの指定がない場合は、当該要素に指定されている、または継承されている colorプロパティの前景色(文字色)がボーダーの色として適用されます。

ボーダーの色の上・下・左・右を個別指定

border-top-color
上辺のボーダー(枠線)の色を指定する
border-bottom-color
下辺のボーダー(枠線)の色を指定する
border-left-color
左辺のボーダー(枠線)の色を指定する
border-right-color
右辺のボーダー(枠線)の色を指定する

上・下・左・右の四辺のボーダーの色を個別に指定する場合は、これら4つのプロパティが用意されています。border-colorプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。

border-colorプロパティの実装状況

IE
◯:IE6は "transparent" の値は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

border-top-colorプロパティ, border-bottom-colorプロパティ, border-left-colorプロパティ, border-right-colorプロパティも同上。

サンプル

.colorful {
border : thick ridge ;
border-color : magenta limegreen aqua yellow ;
}

半角スペース区切りで色を4つ続けて指定している場合の反映される順番は、上→右→下→左の順です。border-color : red blue ; のように色を2つ指定している場合は、上下のボーダーに赤色、左右のボーダーに青色が適用され、border-color : red blue green ; ようにの色を3つ指定している場合は、上辺のボーダーにのみ赤色、左右のボーダーに青色、下辺のボーダーにのみ緑色が適用されます。値に色が1つしか指定されていない場合は、四辺とも同じ色が適用されます。もちろん、個別のプロパティで指定することもできます。

Updated / Published