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

border-left-colorプロパティは、HTML要素の左側に表示される境界線（ボーダー）の色を設定するためのプロパティです。このプロパティを使用することで、ウェブページのデザインにおいて、要素の左側の見た目を視覚的にカスタマイズできます。

色の指定には、redやblueといった定義済みの色キーワード、#RRGGBB形式の16進数カラーコード、rgb(R, G, B)形式のRGB値、hsl(H, S, L)形式のHSL値など、様々な表現方法を利用できます。例えば、border-left-color: #336699;と指定することで、左ボーダーを特定の青みがかった灰色に設定することができます。

このプロパティは、単独で使用されることは少なく、通常はborder-left-width（左ボーダーの太さ）プロパティやborder-left-style（左ボーダーの種類、例えば実線や点線など）プロパティと組み合わせて使用されます。border-left-styleプロパティがnoneと設定されている場合、border-left-colorプロパティにどのような値を指定しても左ボーダーは表示されませんのでご注意ください。同様に、border-left-widthプロパティが0に設定されている場合も、境界線は表示されません。

また、border-left-colorを明示的に指定しない場合、通常は要素のcolorプロパティの値、つまりテキストの色が適用されます。特定の要素の左側に異なる色の境界線を設けたい場合に、このプロパティを適切に活用することが重要です。CSS Modules環境においても、このプロパティの基本的な振る舞いは変わりません。

Copy
1border-left-color: red;

引数なし

引数はありません

戻り値なし

戻り値はありません