border-width

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

border-width

罫線の太さを指定するプロパティ。

数値やコードで太さを指定でき、線種を指定するborder-styleと一緒に指定することで、様々な表現ができる。

値を複数指定することで、辺ごとに異なる線種にすることができる。

値×1 = 4辺全てに適用
値×2 = 上下/左右で適用
値×3 = 上/左右/下で適用
値×4 = 上/右/左/下で適用

数値で指定 「px」で指定する
コード thick(太い)、medium(普通)、thin(細い)のいずれかを指定

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

サンプル(A)

[CSSの記述]

.sampleA 
	border-style:solid;
	border-width:5px 10px 3px;
	border-color:#ff9900;
}

[HTMLの記述]

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

[ブラウザ上の表示]

太さ上辺5px左右10px底辺3px、色#ff9900の実線を指定

サンプル(B)

[CSSの記述]

.sampleB {
	border-style:groove;
	border-width:5px;
	border:color:#0000ff;
}

[HTMLの記述]

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

[ブラウザ上の表示]

太さ5px、色#0000ffのくぼんだ線を指定

borderプロパティで指定]

.sampleB { border:groove 5px #0000ff; }
サンプル(C)

[CSSの記述]

.sampleC {
	border-style:outset;
	border-width:thick;
	border:color:#009900;
}

[HTMLの記述]

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

[ブラウザ上の表示]

太さthick、色#009900の罫線で浮き出た感じに指定

borderプロパティで指定]

.sampleC { border:outset thick #009900; }