【border-left】左のボーダーの色・太さ・スタイルを指定

border-leftプロパティでは、左のボーダーの色・太さ・スタイルをまとめて指定することができます。 色・太さ・スタイルの中から必要な値を任意の順序で並べ、半角スペースで区切って指定します。

指定しなかった値については、各プロパティ(border-colorborder-widthborder-style)の初期値が指定されたことになります。

またborder-styleの値を指定しなかった場合は、初期値の「none」が適用され左のボーダーは表示されません。 ボーダー(枠線)を表示したい場合は、border-styleの値に「none」「hidden」以外を指定して下さい。

書式

  • border-left : ★ ■ ♥ ……… 左のボーダーの色・太さ・スタイルをまとめて指定

★:border-colorの値(ボーダーの色)
■:border-widthの値(ボーダーの太さ)
♥:border-styleの値(ボーダーのスタイル)

border-colorの値(色)

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

border-widthの値(太さ)

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

border-styleの値(スタイル)

none
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、他の値が優先されます。(初期値)
hidden
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、この値(hidden)が優先されます。
dotted
点線で表示します
dashed
破線で表示します
solid
一本線で表示します
double
二重線で表示します
groove
へこんで見えるように見える立体的な線で表示します
ridge
浮き上がったように見える立体的な線で表示します
inset
ボーダーの内側がへこんだように見える立体的な線で表示します(ボーダーの上と左が暗色、下と右が明色となります。)
outset
ボーダーの内側が浮き上がったように見える立体的な線で表示します(ボーダーの上と左が明色、下と右が暗色となります。)

使用した時の例

.sample1 {border-left: solid 8px #F48282;}
.sample2 {border-left: double #0000FF;}
.sample3 {border-left: dotted;}
<div class="sample1">[スタイル]solid [太さ]8px [色]#F48282</div>
<div class="sample2">[スタイル]double [色]#0000FF</div>
<div class="sample3">[スタイル]dotted</div>

ブラウザ上の表示例

[スタイル]solid [太さ]8px [色]#F48282
[スタイル]double [色]#0000FF
[スタイル]dotted

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

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

関連情報