border

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

border

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

複数の値を一緒に指定することで、宣言数を減らす(=CSSをシンプルに書き上げる)ことができる。なお、一括での指定を必要としない値は省略することが可能。(値はどの順番で記載しても可。)

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

borderプロパティの書き方

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

border { 線種 太さ 色 }

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

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

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(C)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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