border

border

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

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

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

borderプロパティの書き方

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

border { 線種 太さ 色 }

値

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

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

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

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

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

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

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