プロパティ border-color

プロパティ border-color は、すべての辺の枠線の色を一度に、または各辺ごとに個別に設定します。プロパティの値には、任意の色の単位を使用できます。デフォルト値: ブロックのテキストと同じ色。

このプロパティは、以下のプロパティの一括指定プロパティです: border-left-color, border-right-color, border-top-color, border-bottom-color。

構文

cssセレクター {
  border-color: 色;
}

値の数

このプロパティは、スペースで区切った 1、2、 3 または 4 の値を受け取ることができます:

例

ブロックの枠線を赤色に設定してみましょう:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  width: 300px;
  height: 100px;
}

Результат:

例

上下の枠線を赤色、左右の枠線を青色に設定します:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue;
  width: 300px;
  height: 100px;
}

Результат:

例

上の枠線を赤色、右を青色、下を緑色、左を黒色に設定します:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

例

枠線の太さ、種類、色を同時に個別に設定します:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

例

border-color で枠線の色が設定されていない場合、 プロパティ color の値が使用されます:

html<div id="elem"></div>

css#elem {
  color: red;
  border-style: solid;
  border-width: 2px;
  width: 300px;
  height: 100px;
}

Результат:

関連項目