{ border-color 【 ボーダー・カラー 】 : -top -right -bottom -left; }

border-colorプロパティは、ボーダーの色をまとめて指定するショートハンドです。

初期値	各プロパティに準じる
継承	なし
適用される要素	すべての要素
モジュール	Backgrounds and Borders Module Level 3

値の指定方法

指定できる値はborder-color系の各プロパティと同様です。それぞれの値は半角スペースで区切って4つまで指定でき、上辺、右辺、下辺、左辺の順に適用されます。いずれかの値を省略した場合は以下のような指定となります。

• 値が1つ　すべての辺に同じ値が適用されます。
• 値が2つ　1つ目が上下辺、2つ目が左右辺に適用されます。
• 値が3つ　1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。

サンプルコード

.box {
  border-width: 5px;
  border-style: solid;
  border-color: #ccc;
}

上の例で指定したborder-colorプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.box {
  border-width: 5px;
  border-style: solid;
  border-top-color: #ccc;
  border-right-color: #ccc;
  border-bottom-color: #ccc;
  border-left-color: #ccc;
}