border-widthプロパティは、上下左右のボーダーの太さをまとめて指定する際に使用します。 上下左右を異なった太さにしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合: | [上下左右]がその太さになります。 |
値を2つ指定した場合: | 記述した順に[上下][左右]の太さになります。 |
値を3つ指定した場合: | 記述した順に[上][左右][下]の太さになります。 |
値を4つ指定した場合: | 記述した順に[上][右][下][左]の太さになります。 |
尚、ボーダーは太さや色だけを指定しても表示されないので注意してください。 これは、border-styleプロパティの初期値がnoneとなっているためです。 ボーダーを表示させるには、太さや色だけでなく種類も同時に指定してやる必要があります。
1px
1em
1ex
thin
medium
thick
上下5px、左右10px
上5px、左右10px、下15px
上5px、右10px、下15px、左20px