CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets border-color property.

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

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

書式

border-color: 値（複数可）

適用対象

すべての要素

初期値

各プロパティの初期値

値の継承

しない

指定できる値

色: ボーダーの色を RGB 値（#000000 などの記述）やカラーネーム（black など）で色を指定します。詳しい指定方法については「色の指定方法（単位）」を参照してください。
transparent: ボーダーの色を透明にします。ボックスに背景が適用されている場合は、背景が透けて見える状態になります。

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個指定しています。

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個指定しています。

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個指定しています。

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個指定しています。