CSS

Cascading Style Sheets border-color property.

border-color（ボーダー色の一括指定）

　上下左右のボーダー色をまとめて設定できるプロパティです。値は半角スペースで区切って 4つまで指定できます。指定した個数によって、適用箇所が変わってきます。

書式
border-color: 値（複数可）
適用対象
すべての要素
初期値
各プロパティの初期値
値の継承
しない
指定できる値
色
ボーダーの色を RGB 値（#000000 などの記述）やカラーネーム（black など）で色を指定します。詳しい指定方法については「色の指定方法（単位）」を参照してください。
transparent
ボーダーの色を透明にします。ボックスに背景が適用されている場合は、背景が透けて見える状態になります。

値を 1個指定した場合

CSS source


p {
	margin: 1.5em;
	padding: 1.5em;
	border: 1em solid;
}
.c1 {
	border-color: #ee3300;
}

HTML source


<p class="c1">この段落の border-color には、値を 1個指定しています。</p>

Sample

この段落の border-color には、値を 1個指定しています。

値を 2個指定した場合

CSS source


p {
	margin: 1.5em;
	padding: 1.5em;
	border: 1em solid;
}
.c2 {
	border-color: #ee3300 #0033ff;
}

HTML source


<p class="c2">この段落の border-color には、値を 2個指定しています。</p>

Sample

この段落の border-color には、値を 2個指定しています。

値を 3個指定した場合

CSS source


p {
	margin: 1.5em;
	padding: 1.5em;
	border: 1em solid;
}
.c3 {
	border-color: #ee3300 #0033ff #006600;
}

HTML source


<p class="c3">この段落の border-color には、値を 3個指定しています。</p>

Sample

この段落の border-color には、値を 3個指定しています。

値を 4個指定した場合

CSS source


p {
	margin: 1.5em;
	padding: 1.5em;
	border: 1em solid;
}
.c4 {
	border-color: #ee3300 #0033ff #006600 #ccbb00;
}

HTML source


<p class="c4">この段落の border-color には、値を 4個指定しています。</p>

Sample

この段落の border-color には、値を 4個指定しています。