border-left-style

CSSプロパティ「border-left-style」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

border-left-style

左辺の罫線の線種を指定するプロパティ。

border-styleは4辺の罫線のスタイルを一括で指定するのに対し、border-left-styleは4辺のうちの左辺のみに指定が反映される。(他の1辺のみ指定する場合は、border-top-style(上)、border-bottom-style(下)、border-right-style(右)を利用する。)

実線、点線、破線、二重線などの値があり、太さを指定するborder-left-widthと一緒に指定することで、様々な表現ができる。

border-styleの解説ページ参照

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleA {
	border-left-style:solid;
	border-left-width:5px;
	border-left-color:#ff9900;
}

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

太さ5px、色#ff9900の実線を指定

border-leftプロパティで指定]

.sampleA { border-left:solid 5px #ff9900; }
サンプル(B)

[CSSの記述]

.sampleB {
	border-left-style:double;
	border-left-width:3px;
	border-left-color:#0000ff;
}

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

太さ3px、色#0000ffの二重線を指定

border-leftプロパティで指定]

.sampleB { border-left:double 3px #0000ff; }
サンプル(C)

[CSSの記述]

.sampleC {
	border-left-style:dotted;
	border-left-width:2px;
	border-left-color:#009900;
}

[HTMLの記述]

<p class="sampleC">テキストテキスト</p>

[ブラウザ上の表示]

太さ2px、色#009900の点線を指定

border-leftプロパティで指定]

.sampleC { border-left:dotted 2px #009900; }