border-colorプロパティは、上下左右のボーダーの色を一括で指定できます。
各値は、半角スペースなどの空白類文字で区切って書きます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[ <色>｜transparent ]{1,4}｜inherit

初期値

個別のプロパティを参照します

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

値の解説

<色>

キーワード（red, blueなど）かRGB数値のいずれかで指定できます。

transparent

ボーダー領域を透明にする。この際ボーダー幅は確保されます。
なお、IE6はtransparentに対応していません。

• border-colorの初期値はcolorプロパティで指定されている色が適用されます。
• ボーダーを表示させるには、border-styleプロパティの指定が必要です。
• <色>に関しては、「色の指定に関して」をご参照ください。

border-colorのサンプル

p {
  margin: 10px;
  padding: 5px;
  border-style: solid;
}

p.sample01 {
  border-color: red #ccc #006 #606;
}

p.sample02 {
  border-color: #960 #000 #060;
}

p.sample03 {
  border-color: #999;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

ボーダーのサンプルです。

ボーダーのサンプルです。

ボーダーのサンプルです。