W3G

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

上辺のボーダー（枠線）の色を指定する

• <色>
• transparent
• inherit

border-bottom-color

下辺のボーダー（枠線）の色を指定する

• <色>
• transparent
• inherit

border-left-color

左辺のボーダー（枠線）の色を指定する

• <色>
• transparent
• inherit

border-right-color

右辺のボーダー（枠線）の色を指定する

• <色>
• transparent
• inherit

上・下・左・右の四辺のボーダーの色を個別に指定する場合は、これら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つしか指定されていない場合は、四辺とも同じ色が適用されます。もちろん、個別のプロパティで指定することもできます。