border-width

解説

上下左右の線幅をまとめて指定します。上下左右を異なった幅にしたい場合には、スペースで区切り複数の値を指定することもできます。値を1つ指定した場合は上下左右が指定幅となります。値を2つ指定した場合は記述した順に上下、左右が指定幅となります。値を3つ指定した場合は記述した順に上、左右、下、が指定幅となります。値を4つ指定した場合は記述した順に上、右、下、左が指定幅となります。線の太さはキーワード、もしくは数値で指定することができます。キーワードはthin(細い)、medium(普通)、thick(太い)を指定することができますが、実際に表示される太さはブラウザにより異なりますので注意が必要です。

プロパティ情報

値:長さthinmediumthickの中から1つ以上
初期値:midium
適用対象:全ての要素
継承:しない
パーセンテージ:不可
適用メディア:視覚
レベル:1〜2

参照

使用例

ソース

CSSの記述方法はスタイルシートってなに?も参照下さい。

p.sample1 {border-width: 1px 6px; border-style: solid;}
p.sample2 {border-width: thin medium thick; border-style: solid;}
p.sample3 {border-width: 3ex 6ex 9ex 12ex; border-style: solid;}
HTMLの記述方法

<p class="sample1">例1</p>
<p class="sample2">例2</p>
<p class="sample3">例3</p>

表示結果

例1

例2

例3