border-colorプロパティ

値

パターン1

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

CSSコード例

border-color: #00c;

表示例：

パターン2

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

CSSコード例

border-color: #999 #ccc;

表示例：

パターン3

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

CSSコード例

border-color: gray blue black;

表示例：

パターン4

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

CSSコード例

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

表示例：

パターン5

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

CSSコード例

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

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。