border-bottom-color

style.css

/* カラーネームで指定 */
div.test { border-bottom-color: red;}

/* カラーコードで指定 */
div.test1 { border-bottom-color: #ff0;}

/* 透明（ボーダーの領域はあるが見えない） */
div.test2 { border-bottom-color: transparent;}

/* rgb()関数で指定 */
div.test3 { border-bottom-color: rgb(0, 119, 204);}

/* rgba()で半透明 */
div.test4 { border-bottom-color: rgba(0, 0, 0, 0.3);}

/* border-bottom-style も合わせて指定しないと表示されない */
.underline {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #0077cc;
}

/* ショートハンド border-bottom との比較 */
div.shorthand { border-bottom: solid 2px #0077cc;}         /* まとめて指定 */
div.longhand  { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0077cc;} /* 個別指定 */

※ 以下のサンプルの『border-style』プロパティは『solid』を指定しています。

<div style="border-bottom-color: red; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

下部の境界線の色に関する項目を指定できます。

『border-bottom-color』プロパティに何も指定していない場合は『color』プロパティに設定されている色が初期値となります。