border-colorでボーダーの色を指定する【CSS】

border-color系のプロパティは、ボーダーの色を指定できるプロパティです。

{border-top-color: 上辺の色;}
{border-right-color: 右辺の色;}
{border-bottom-color: 下辺の色;}
{border-left-color: 左辺の色;}

それぞれ上辺（top）、右辺（right）、下辺（bottom）、左辺（left）の色を指定できます。

border-color系の値の指定方法

border-color系のプロパティでは、色をキーワードやカラーコードで指定します。

赤色のボーダーです。

border-colorプロパティでは、ボーダーの色をまとめて指定できます。

{border-color: -上辺(top) -右辺(right) -下辺(bottom) -左辺(left);}

border-colorプロパティで指定できる値は、border-color系の各プロパティと同じで、それぞれの値は半角スペースで区切って指定できます。

必ずしも4つの値を指定する必要はなく、指定する値の数によって適用のされ方が異なります。

指定する値が1つの場合、すべての辺に同じ値が適用されます。

{border-color: 上下左右辺;}

指定する値が2つの場合、1つ目の値が上下辺、2つ目の値が左右辺に適用されます。

{border-color: 上下辺左右辺;}

指定する値が3つの場合、1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。

{border-color: 上辺左右辺下辺;}

指定する値が4つの場合、上辺、右辺、下辺、左辺の順番に値が適用されます。

{border-color: 上辺右辺下辺左辺;}