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

border-bottom-colorプロパティは、要素の下側のボーダー（境界線）の色を設定するために使用されるプロパティです。このプロパティは、HTML要素の下辺に表示される線の色を指定し、ウェブページの視覚的なデザインを調整する際に利用されます。

指定できる値は多岐にわたり、例えば「red」や「blue」といった色のキーワード、#RRGGBB形式の16進数カラーコード（例: #FF0000）、rgb()やrgba()関数（例: rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)）によるRGB値、hsl()やhsla()関数によるHSL値（例: hsl(0, 100%, 50%)、hsla(0, 100%, 50%, 0.5)）などがあります。また、「transparent」を指定することで透明にしたり、「currentcolor」キーワードを指定することで要素のテキストの色を継承させたりすることも可能です。

border-bottom-colorの初期値は「currentcolor」です。これは、特に指定がない場合に、要素に設定されている文字の色がボーダーの色として適用されることを意味します。

このプロパティは、border-bottom-width（幅）やborder-bottom-style（スタイル）といった他のプロパティと組み合わせて使用することで、下辺のボーダーの見た目を詳細に制御できます。例えば、border-bottom: 2px solid blue; のように記述するショートハンドプロパティborder-bottomを使用すると、幅、スタイル、色を一度に設定でき、この場合、「blue」がborder-bottom-colorの値として適用されます。

注意点として、border-bottom-styleプロパティが「none」に設定されている場合、border-bottom-colorで色を指定してもボーダーは表示されません。ボーダーを視覚的に表示させるためには、border-bottom-styleに「solid」や「dashed」などの有効な値を設定する必要があります。このプロパティを適切に活用することで、ウェブページの要素に明確な区切りや装飾を加えることができます。

Copy
1selector {
2  border-bottom-color: red;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません