Title

border-bottom-colorとは

ここで説明するborder-bottom-color とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界線

bottom

読み: ボトム
意味: 下、底

color

読み: カラー
意味: 色

目次に戻る

border-bottom-colorプロパティの概要

このプロパティは要素の下辺の境界線の色を設定することができます。

下辺の境界線の色は次の一括指定プロパティを使うこともできまが、 この個別プロパティを使うことでコードがシンプルになることも考えられます。

• border-color
• border-bottom

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-bottom-color: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルにはdiv要素を使用しています。 境界線は「線の種類」であるborder-styleの初期値がnoneになっており、 このままでは境界線は表示されませんので、予め以下のプロパティを設定して表示されるようにしています。

• border-style: solid;
• border-width: thick;

目次に戻る

初期値: currentColor

初期値のcurrentColorキーワードは、 ユーザーエージェントの既定色で境界線が表示されます。 つまりブラウザで決まっている標準の色が使われるということです。

div{
	border: thick solid ##gray;
	border-bottom-color: currentColor;
}

目次に戻る

キーワード値: カラーキーワード

境界線の色を指定する場合W3Cで定義されているカラーキーワードを使って色を指定することができます。 また16進数や関数を使った色の指定方法もあります。

詳しくは、色見本 色見本 (カラーサンプル) のページを参照してください。

div{
	border: thick solid ##gray;
	border-bottom-color: ##hotpink;
}

目次に戻る

グローバル値

border-bottom-colorプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のcurrentColorに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-bottom-color: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-bottom-color: currentColor;

border-bottom-color: hotpink;

目次に戻る