border-width
解説
上下左右の線幅をまとめて指定します。上下左右を異なった幅にしたい場合には、スペースで区切り複数の値を指定することもできます。値を1つ指定した場合は上下左右が指定幅となります。値を2つ指定した場合は記述した順に上下、左右が指定幅となります。値を3つ指定した場合は記述した順に上、左右、下、が指定幅となります。値を4つ指定した場合は記述した順に上、右、下、左が指定幅となります。線の太さはキーワード、もしくは数値で指定することができます。キーワードはthin
(細い)、medium
(普通)、thick
(太い)を指定することができますが、実際に表示される太さはブラウザにより異なりますので注意が必要です。
プロパティ情報
値: | 長さ、thin 、medium 、thick の中から1つ以上 |
---|---|
初期値: | midium |
適用対象: | 全ての要素 |
継承: | しない |
パーセンテージ: | 不可 |
適用メディア: | 視覚 |
レベル: | 1〜2 |
参照
border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width
使用例
ソース
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