border-bottom-colorプロパティの説明
CSSのborder-bottom-color
プロパティは、要素の下辺に表示される境界線の色を指定します。上下左右の境界線の色を一括で指定する場合はborder-color
を、下辺の境界線の種類や太さも一括で指定する場合はborder-bottom
を使用して下さい。
このプロパティは、かなり限定的な箇所を対象としているため使う機会はそう多くありません。しかし、全体で指定した境界線のスタイルを、特定の場所で個別に上書きしたい時などに有効な手段となりえます。逆に言うと、こういった具体的な機能がパーツとして組み込まれているのがショートーハンド・プロパティです。
ほかの辺の境界線の色を指定する場合は、以下のいずれかのプロパティを使用して下さい。
border-top-color
:上辺の境界線の色を指定するborder-right-color
:右辺の境界線の色を指定するborder-bottom-color
:下辺の境界線の色を指定するborder-left-color
:左辺の境界線の色を指定する
border-bottom-colorに指定できる値
<color>
- CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値は
currentcolor
です。詳細を以下に示します。 keyword
- 特定の色を表すキーワードです。例えば、赤は
red
、青はblue
のように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。 - currentColor
- 要素の
color
プロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。 - 16進数値
- 16進数の文字列(0〜9, A〜F)を使った表記です。先頭にシャープ(
#
)を置き、6桁または3桁で表現します。透明度を表す場合はアルファチャネルを追加し、8桁または4桁で表現します。例えば、赤を表現する場合、#ff0000
または#f00
となります。 - RBG値
- 光の三原色(赤、青、緑)の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
rgb()
またはrgba()
です。 - HSL値
- 色相(H)、彩度(S)、明度(L)の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
hsl()
またはhsla()
です。 - システム色
- ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。
border-bottom-colorの使い方とサンプルコード
border-bottom-color
プロパティの構文は以下の通りです。
border-bottom-colorの実例
それでは簡単な例を見てみましょう。ここでは、border
で要素に共通のスタイルを与え、その色だけを上書きした時の挙動を確かめます。