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

border-left-colorプロパティでは、左のボーダーの色を個別に指定することができます。 ボーダーに色を指定しない場合はcolorプロパティの色が反映されます。

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

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

書式

  • border-left-color : ……… 左のボーダー(枠線)を個別指定

★:色、transparent、inherit

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

使用した時の例

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

ブラウザ上の表示例

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

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

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

関連情報