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; }- 前の記事：border
- 次の記事：border-width