border-bottom-color
底辺の罫線の色を指定するプロパティ。
border-colorは4辺の罫線の色を指定するのに対し、border-bottom-colorは4辺のうちの底辺のみに指定が反映される。（他の1辺のみ指定する場合は、border-top-color（上）、border-right-color（右）、border-left-color（左）を利用する。）
16進数によるカラーコード、個別のカラーネーム、RGB値のいずれかを値にすることで、罫線の色を指定することができる。
値
border-colorの解説ページ参照
使用例
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA {
border-bottom-style:solid;
border-bottom-width:5px;
border-bottom-color:#0000ff;
}
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
カラーコード#0000ffを指定
border-bottomプロパティで指定]
下部罫線に関する指定を一括で行うborderを利用すると、CSSの記述は次の通りとなる。
.sampleC { border-bottom:solid 5px #0000ff; }
サンプル(B)
[CSSの記述]
.sampleB {
border-bottom-style:solid;
border-bottom-width:5px;
border-bottom-color:green;
}
[HTMLの記述]
<p class="sampleB">テキストテキスト</p>
[ブラウザ上の表示]
カラーネーム「green」を指定
border-bottomプロパティで指定]
.sampleB { border-bottom:solid 5px green; }
サンプル(C)
[CSSの記述]
.sampleC {
border-bottom-style:solid;
border-bottom-width:5px;
border-bottom-color:rgb(255,0,0);
}
[HTMLの記述]
<p class="sampleC">テキストテキスト</p>
[ブラウザ上の表示]
RGB値「255,0,0」を指定
border-bottomプロパティで指定]
.sampleC { border-bottom:solid 5px rgb(255,0,0) }
- 前の記事：border-bottom-width
- 次の記事：border-left