プロパティ border-color

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

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

構文

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

値の数

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

数	説明
`1`	すべての辺に同時に適用されます。
`2`	1つ目の値は上下、2つ目の値は左右の枠線に適用されます。
`3`	1つ目の値は上、2つ目は左右、3つ目は下の枠線に適用されます。
`4`	1つ目の値は上の枠線、2つ目は右、 3つ目は下、4つ目は左の枠線に適用されます。

例

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

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

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

例

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

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

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

例

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

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

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

例

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

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

#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 の値が使用されます:

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

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

プロパティ border-color

構文

値の数

例

例

例

例

例

関連項目