CSSでborder-bottom-colorプロパティを用いて色の設定をする方法

2025.04.13

CSS

ここでは、CSSでborder-bottom-colorプロパティを用いてHTML要素下側の境界線の色を設定する方法について説明していきます。

Contents

border-bottom-colorプロパティで色を設定するには、まず前提として以下のプロパティを設定しておく必要があります。

以下のコードは全てのケースで共通して指定するCSSコードです。

.border-bottom-color {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: fit-content;
}

※widthプロパティの値をfit-contentとすることで、文字の幅に合わせて要素の幅が自動調整されます。

上記の前提を満たした上で、以下のように設定していきます。

まずはカラーネームを用いて指定する方法についてご紹介します。

<p class="border-bottom-color border-bottom-color--color-name">
  border-bottom-color（カラーネーム）
</p>

.border-bottom-color--color-name {
  border-bottom-color: red;
}

次に、RGB関数を用いて指定する方法をご紹介します。
こちらでも赤色を指定しています。

<p class="border-bottom-color border-bottom-color--rgb">
  border-bottom-color（RGB）
</p>

.border-bottom-color--rgb {
  border-bottom-color: rgb(256, 0, 0);
}

最後に16進数を用いて指定する方法をご紹介します。

こちらでも同様に赤色で指定しています。

<p class="border-bottom-color border-bottom-color--hexadecimal">
  border-bottom-color（16進数）
</p>

.border-bottom-color--hexadecimal {
  border-bottom-color: #ff0000;
}

上記すべての実行結果は以下で見ることができます。

このように、CSSでborder-bottom-colorプロパティに対して、カラーネーム・RGB()関数・16進数を用いることで、要素下側の境界線を指定することができます。

bordeプロパティを用いた記事は以下でも見ていただくことができます。