border-color

CSSプロパティ「border-color」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

border-color

罫線の色を指定するプロパティ。

16進数によるカラーコード、個別のカラーネーム、RGB値のいずれかを値にすることで、罫線の色を指定することができる。

カラーコード #000000~#ffffffのカラーコードを指定
カラーネーム black、white等個別のカラーネームを指定
rgb(0,0,0) ~ rgb(255,255,255)のRGB値を指定

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleA {
	border-style:solid;
	border-width:5px;
	border-color:#0000ff;
}

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

カラーコード#0000ffを指定

borderプロパティで指定]

.sampleC { border:solid 5px #0000ff; }
サンプル(B)

[CSSの記述]

.sampleB {
	border-style:solid;
	border-width:5px;
	border-color:green;
}

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

カラーネーム「green」を指定

borderプロパティで指定]

.sampleC { border:solid 5px green; }
サンプル(C)

[CSSの記述]

.sampleC {
	border-style:solid;
	border-width:5px;
	border-color:rgb(255,0,0);
}

[HTMLの記述]

<p class="sampleC">テキストテキスト</p>

[ブラウザ上の表示]

RGB値「255,0,0」を指定

borderプロパティで指定]

.sampleC { border:solid 5px rgb(255,0,0); }