border-colorプロパティ は，要素の 境界ボックスの上下左右の線の色 （border-top-color，border-right-color， border-bottom-color，border-left-color）を一括指定します。

すなわち，

1. 上の色：　border-top-color，
2. 右の色：　border-right-color，
3. 下の色：　border-bottom-color，
4. 左の色：　border-left-color，

上の 1 ～ 4 に示すとおり，値の形式 として， 半角ブランクを挟んで４つまでの値が指定できます。　このとき，

1. 指定する値の個数にかかわらず，値の順序は，最初から， 上の色 → 右の色 → 下の色 → 左の色 と決まっています。　（上から時計回り と覚えてください）
2. 値を３つ指定した場合は，省略された 左の色 は 右の色 と同じになります。　
3. 値を２つ指定した場合は，さらに，省略された 下の色 は 上の色 と同じになります。
4. 値を１つだけしか指定しない場合は，それが 上，右，下，左 のすべての色になります。

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

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

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

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

border-colorプロパティの指定を行っても，border-style プロパティ を none や hidden 以外の値で指定しないと境界線は表示されません。

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

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

<br>
<div class="sample1">これが class="sample1" の部分です。</div>
<br>
<div class="sample2">これが class="sample2" の部分です。
   <br>border-style の値が初期値の <b>none</b> のため
   <br>境界線は表示されません。
</div>
<br>
<div class="sample1 sample2">
   これが class="sample1 sample2" の部分です。
</div>
<br>

上述のとおり，値を３つ指定した場合は，省略された 左の色 は 右の色 と同色になります。 　さらに，値を２つ指定した場合は， 加えて，省略された 下の色 は 上の色 と同色になります。 　値を１つだけしか指定しない場合は，それが 上下左右すべての色になります。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample3 { width:320px; height:60px; 
      border: solid 6px;
      border-color: red green blue yellow ;
   }
   div.sample4 { width:320px; height:60px; 
      border: solid 6px;
      border-color: red green blue;
   }
   div.sample5 { width:320px; height:60px; 
      border: solid 6px;
      border-color: red green;
   }
   div.sample6 { width:320px; height:60px; 
      border: solid 6px;
      border-color:red;
   }
-->
</style>

<div class="sample3">
   これが class="sample3" の部分です。
</div>
<br>
<div class="sample4">
   これが class="sample4" の部分です。
</div>
<br>
<div class="sample5">
   これが class="sample5" の部分です。
</div>
<br>
<div class="sample6">
   これが class="sample6" の部分です。
</div>