border-leftプロパティ は，要素の境界の左部分の スタイル（border-left-style）と 太さ（border-left-width）と 色（border-left-color） の ３つのプロパティをまとめて指定 します。

指定の方法は，これら３つのプロパティの値を順不同で半角ブランク（空白）を区切りとして並べます。

borderプロパティでは，上下左右の４つの境界の一括指定ができますが，margin や padding などの一括指定とは異なり，上下左右の４つの境界に対して異なる値を指定することはできません。 　これらの指定が異なる場合には，対象部分に対する個別のプロパティ（border-top， border-bottom，border-left，border-right） を使用して，指定することが必要です。

また，border-leftプロパティ の指定を行うと，指定可能な３つのプロパティのうち指定のないものの値がリセットされて， 初期値に戻りますので，その目的でこの border-leftプロパティ を使用することもできます。（下記「例２」参照。）

３つのプロパティの値の指定方法の詳細については，それぞれのプロパティの解説を参照してください。

つぎの例から，borderプロパティ を指定すると，個別のプロパティ（border-top， border-bottom，border-left，border-right） の４つすべてで同じ値を指定した場合と同じ結果となることがわかります。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample1 { width:320px; height:60px; border: solid red 3px; }
   div.sample2 { width:320px; height:60px; 
      border-top: solid red 3px;
      border-right: solid red 3px;
      border-bottom: solid red 3px;
      border-left: solid red 3px;
      border-image: none 3px;
   }
-->
</style>

<div class="sample1">
   これが class=&quot;sample1&quot; の部分です。
</div>
<br>
<div class="sample2">
   これが class=&quot;sample2&quot; の部分です。
</div>

つぎの例では，左側の境界（border-left）の色は "blue" になります。 　なぜなら，４行目にある borderプロパティ の指定では，色は "red" ですが， 次の行にある border-left プロパティ では，色が指定されていません。 　その結果，色の値はリセットされて color プロパティ の値とされます。 　color プロパティによる色の指定はそれより後にありますが，この border-left プロパティ と color プロパティ の順序は結果には影響しません。　なお，左側の境界部分では，太さも初期値にリセットされています。

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

<div class="sample3">
   これが class=&quot;sample3&quot; の部分です。
</div>