border-bottom-colorプロパティ は，要素の 境界ボックスの下部の線の色 を指定します。

border-bottom-colorプロパティの指定を行っても，border-bottom-style プロパティ を none や hidden 以外の値で指定しないと境界線は表示されません。　なお，border-bottomプロパティによって， border-bottom-style，border-bottom-color，border-bottom-width の３つのプロパティを 一括指定できます。

要素の色を設定するプロパティとしては，ほかに color（文字や前景の色）， background-color（背景色）， outline-color（輪郭色） の３つがあります。　

それ以外の色の指定方法は，colorプロパティと同じで， "#" の後に R（赤），G（緑），B（青）の光の３原色をそれぞれ２桁の16進数で表した数値を並べた #rrggbb 形式 で指定する方法や色の名前で指定する方法など があります。（「色の値」 や 「CSS カラーモジュール Level 3」 を参照。）

以下に代表的な16色の #rrggbb と色の名前を示します。

なお、色の名前の一覧は原色大辞典のブラウザーで名前が定義されている140色の色名，RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

つぎの例に示すとおり，border-bottom-color プロパティの指定を行っても，border-bottom-style プロパティ の初期値が none であるため，border-bottom-style プロパティ をそれ以外の値で指定しないと下部の境界線は表示されません。

なお，border-bottomプロパティによって， border-bottom-style，border-bottom-color， border-bottom-width の３つのプロパティを 一括指定できます。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample1 { 
      width:320px; height:60px;
      background-color: #CCCCCC;
      border: solid red 3px;
      border-bottom-color: green;
   }
   div.sample2 { 
      width:320px; height:60px;
      background-color: #CCCCCC;
      border-bottom-color: green;
   }
   div.sample3 { 
      width:320px; height:60px;
      background-color: #CCCCCC;
      border-bottom-style: solid;
      border-bottom-color: green;
      border-bottom-width: 3px;
   }
-->
</style>

<br>
<div class="sample1">これが class="sample1" の部分です。</div>
<br>
<div class="sample2">
   これが class="sample2" の部分です。
   <br>border-bottom-style の値が初期値の <b>none</b> のため
   境界線は表示されません。
</div>
<br>
<div class="sample3">
   これが class="sample3" の部分です。
   <br>指定されていない上と左右の境界線は表示されません。
</div>
<br>