【CSS Modules】border-bottom-styleプロパティの使い方

border-bottom-styleプロパティは、HTML要素の下側の境界線（ボーダー）のスタイルに関する設定値を保持するプロパティです。このプロパティを使用することで、ウェブページのデザインに応じて、要素の下部に表示される境界線の視覚的な種類を指定できます。

設定できる値は多岐にわたり、それぞれが異なる視覚効果を提供します。例えば、noneは境界線を全く表示しないことを意味し、hiddenも同様に境界線を表示しませんが、隣接要素との空間の扱いに僅かな違いがあります。基本的な境界線として、dottedは点線、dashedは破線、solidは一本の実線を表示します。また、doubleは二本の実線で境界線を表現し、border-bottom-widthで指定された幅の中に二本の線と隙間が収まります。

さらに、立体的な表現を可能にする値もあります。grooveは要素が内側に溝が彫られているように、ridgeは要素が外側に隆起しているように見せます。insetは要素全体が内側に凹んでいるような、outsetは要素全体が外側に浮き出ているような錯覚を与えます。これらの立体的なスタイルは、border-bottom-colorプロパティで指定された色に基づいて自動的に陰影がつけられ、よりリアルな見た目になります。

このプロパティは、border-bottom-width（太さ）やborder-bottom-color（色）プロパティと組み合わせて使用することで、下側境界線のデザインを完全にコントロールできます。また、これら三つのプロパティを一度に設定するためのショートハンドプロパティであるborder-bottomも存在します。ウェブサイトのレイアウトにおける区切りや強調など、要素の視覚的な構造を明確にする上で非常に重要な役割を果たすプロパティです。

Copy
1border-bottom-style: solid;

引数なし

引数はありません

戻り値なし

戻り値はありません