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