border-style

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

border-style

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

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

ただし、border-styleで指定された値はボックスの4辺全てに適用される。1辺のみに適用させたい場合は、border-top-style(上辺)、border-bottom-style(底辺)、border-left-style(左辺)、border-right-style(右辺)を使用する。

solid 実線
dotted 点線
dashed 破線
double 二重線
ridge 浮き出た感じの線
groove くぼんだ感じの線
outset 罫線で囲まれた部分が浮き出て見える線
inset 罫線で囲まれた部分がくぼんで見える線

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

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

borderプロパティで指定]

.sampleA { border:solid 5px #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:3px;
	border-color:#009900;
}

[HTMLの記述]

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

[ブラウザ上の表示]

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

borderプロパティで指定]

.sampleC { border:outset 3px #009900; }