CSS

border-top-color
border-bottom-color
border-left-color
border-right-color
（ボーダー色）

書式 

border-top-color: 値
border-bottom-color: 値
border-left-color: 値
border-right-color: 値
適用対象 すべての要素
初期値 color プロパティの値
値の継承 しない
指定できる値
色
ボーダー色を RGB 値またはキーワードで指定します。詳しい指定方法については「色の指定（単位）」を参照してください。
transparent
ボーダーを透明にします。ボックスに背景が適用されている場合は、背景が透けて見える状態になります。

それぞれ上下左右のボーダー色を設定するプロパティです。

基本的な例

上下左右のボーダーに、上の段落では同じ色を、下の段落ではそれぞれ別の色を指定した例です。

CSS source


p {
	margin: 3em;
	padding: 1.5em;
	border: 1em solid;
}
.c1 {
	border-top-color: #ff3300;
	border-bottom-color: #ff3300;
	border-left-color: #ff3300;
	border-right-color: #ff3300;
}
.c2 {
	border-top-color: #006600;
	border-bottom-color: #ff3300;
	border-left-color: #003399;
	border-right-color: #ffcc00;
}

HTML source

<p class="c1">この段落の上下左右のボーダーには、同じ色を指定しています。</p>
<p class="c2">この段落の上下左右のボーダーには、それぞれ別の色を指定しています。</p>
サンプルページの画像↓
サンプルページの画像
サンプルページを表示する。