【border-bottom-color】下のボーダー(枠線)の色を指定

border-bottom-colorプロパティでは、下のボーダーの色を個別に指定する事ができます。ボーダーに色が指定されていない場合は、colorプロパティの色が適用されます。

上下左右のボーダーの色をまとめて指定したい場合は、border-colorプロパティを使用して下さい。

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

書式

  • border-bottom-color : ……… 下のボーダー(枠線)の色を個別指定

★:色、transparent、inherit

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

使用した時の例

div{border-style:solid;}
  
.sample1 {border-bottom-color: #F48282;}
.sample2 {border-bottom-color: blue;}
.sample3 {border-bottom-color: transparent;}
<div>border-bottom-colorを指定しない場合</div>
<div class="sample1">下のボーダーの色を#F48282に指定。</div>
<div class="sample2">下のボーダーの色をblueに指定。</div>
<div class="sample3">下のボーダーをtransparentに指定。</div>

ブラウザ上の表示例

border-bottom-colorを指定しない場合
下のボーダーの色を#F48282に指定。
下のボーダーの色をblueに指定。
下のボーダーをtransparentに指定。

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

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

関連情報