CSSのborder-bottom-styleプロパティを用いて下線のスタイルを設定する方法

2025.04.14

CSS

このページでは、CSSのborder-bottom-styleプロパティを用いて、HTML要素の下線のスタイルを設定する方法について説明していきます。

Contents

HTML要素の下線を破線にするためには、border-bottom-styleプロパティの値をdashedで指定します。

<p class="border-bottom-style border-bottom-style--dashed">
  border-bottom-style: dashed;
</p>

.border-bottom-style {
  width: fit-content;
}
.border-bottom-style--dashed {
  border-bottom-style: dashed;
}

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

HTML要素の下線を点線にするには、border-bottom-styleプロパティの値をdottedで指定します。

<p class="border-bottom-style border-bottom-style--dotted">
  border-bottom-style: dotted;
</p>

.border-bottom-style--dotted {
  border-bottom-style: dotted;
}

次に下線のスタイルを二重線にする方法について説明していきます。

HTML要素の下線のスタイルを二重線にするためには、border-bottom-styleプロパティの値をdoubleで指定します。

<p class="border-bottom-style border-bottom-style--double">
  border-bottom-style: double;
</p>

.border-bottom-style--double {
  border-bottom-style: double;
}

HTML要素の下線のスタイルを実線にするためには、border-bottom-styleプロパティの値をsolidに指定します。

<p class="border-bottom-style border-bottom-style--solid">
  border-bottom-style: solid;
</p>

.border-bottom-style--solid {
  border-bottom-style: solid;
}

上記のコードを実行した結果が以下の通りになります。

このように、border-bottom-styleプロパティの値を設定することで、下線のスタイルを設定することができます。