border-colorプロパティは上下左右の四辺のボーダー(枠線)の色をまとめて指定できる簡略化プロパティです。
colorプロパティの値)を参照値には <色>、または "transparent" のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。値を1つだけ指定した場合は、その色が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。border-colorプロパティに指定できる値は、それぞれ以下の意味を示します。
transparentborder-widthプロパティの値分のボーダーの幅はスペースとして空くことになる。なお、当該要素に背景が指定されていれば、ボーダー分のスペースには、その背景が反映されることになる。border-widthプロパティ(0以外の値)と border-styleプロパティ("none" 以外の値)が指定されおり、border-colorプロパティの指定がない場合は、当該要素に指定されている、または継承されている colorプロパティの前景色(文字色)がボーダーの色として適用されます。
border-top-colorborder-bottom-colorborder-left-colorborder-right-color上・下・左・右の四辺のボーダーの色を個別に指定する場合は、これら4つのプロパティが用意されています。border-colorプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。
transparent" の値は未実装)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つしか指定されていない場合は、四辺とも同じ色が適用されます。もちろん、個別のプロパティで指定することもできます。