【border-color】ボーダー(枠線)の色を一括で指定

border-colorプロパティでは、上下左右の各ボーダーの色を一括で(まとめて)指定することができます。 指定する値が1つの時は上下左右のボーダーが同じ色になりますが、複数の値を半角スペースで区切って指定すると、値の数によって次のように適用されます。

  • 値が1つの場合……「上下左右」
  • 値が2つの場合……「上下」「左右」
  • 値が3つの場合……「上」「左右」「下」
  • 値が4つの場合……「上」「右」「下」「左」

またボーダーの色を指定しない場合はcolorプロパティで設定されている色が適用されます。

なおborder-colorのみを指定してもボーダー(枠線)は表示されません。 これはボーダーの種類(border-style)の初期値が「none」となっているためです。 ですのでボーダーを表示させて色を指定するためには、border-colorと併せて、ボーダーの種類(border-style)を設定し「none」「hidden」以外の値を指定します。

書式

  • border-color : ……… ボーダーの色を一括で指定

★:色、transparent、inherit

RGB値、または「red」などのカラーネームで色を指定します。色についてはカラーコード一覧を参照下さい。
transparent
ボーダーの幅をそのまま確保し、色を透明にします。

使用した時の例

div {border-style:solid;}

.sample1 {border-color:#F48282;}
.sample2 {border-color:#F48282 #0000FF;}
.sample3 {border-color:#F48282 #0000FF #00FF00;}
.sample4 {border-color:#F48282 #0000FF #00FF00 #FF8C00;}
.sample5 {border-color:#F48282 #F48282 transparent;}
<div class="sample1">[上下左右]#F48282</div>
<div class="sample2">[上下]#F48282 [左右]#0000FF</div>
<div class="sample3">[上]#F48282 [左右]#0000FF [下]#00FF00</div>
<div class="sample4">[上]#F48282 [右]#0000FF [下]#00FF00 [左]#FF8C00</div>
<div class="sample5">[上]#F48282 [左右]#F48282 [下]transparent(透明)</div>

ブラウザ上の表示例

[上下左右]#F48282
[上下]#F48282 [左右]#0000FF
[上]#F48282 [左右]#0000FF [下]#00FF00
[上]#F48282 [右]#0000FF [下]#00FF00 [左]#FF8C00
[上]#F48282 [左右]#F48282 [下]transparent(透明)

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報