border-colorプロパティ

要素の4辺に引くボーダーの色を指定します。

値

4辺のボーダーをカラーコードで一括指定した例です。

border-color: #00c;

表示例

値を2つ指定した場合、1つ目の「#999」はtop、bottomに適用され、2つ目の「#ccc」はleft、rightに適用されます。

border-color: #999 #ccc;

表示例

値を3つ指定した場合、1つ目の「gray」はtopに、2つ目の「blue」はleft、rightに、3つ目の「black」はbottomに適用されます。

border-color: gray blue black;

表示例

次のように、4辺のボーダーそれぞれに対して個別に色を指定することも可能です。
topだけ指定したい場合や、一括指定した後に特定のボーダーだけ別の色で上書きしたい場合に使用します。

border-top-color: black;
border-right-color: red;
border-bottom-color: orange;
border-left-color: yellow;

表示例

全ての辺のボーダーに一括指定した後に、bottomのボーダーだけ色を上書きする例です。

border-color: gray;
border-bottom-color: blue;

表示例