HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー カラー

border-colorプロパティ

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

  • 初期値

    各要素に設定された初期値

  • 継承

    不可

  • 適用できる要素

    全要素

パターン1

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

CSSコード例

border-color: #00c;

表示例:


パターン2

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

CSSコード例

border-color: #999 #ccc;

表示例:


パターン3

値を3つ指定した場合、1つ目の「gray」はtopに、2つ目の「blue」はleftrightに、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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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