border-bottom

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

border-bottom

底辺の罫線に関する値を一括で指定するプロパティ。

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

border-bottomプロパティの書き方

複数の値を半角スペースで区切って指定。

border-bottom { 線種 太さ 色 }

線種 border-styleの解説ページを参照
太さ border-widthの解説ページを参照
border-colorの解説ページを参照

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

サンプル(A)

[CSSの記述]

.sampleA { border-bottom:solid 5px #ff9900; }

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(B)

[CSSの記述]

.sampleB { border-bottom:dotted 2px #0000ff; }

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(C)

[CSSの記述]

.sampleC { border-bottom:double 7px #009900; }

[HTMLの記述]

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

[ブラウザ上の表示]

太さ7px、色#009900の二重線を指定