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

border-colorプロパティは、HTML要素の境界線（ボーダー）の色を保持するプロパティです。このプロパティを使用することで、要素の上下左右に表示される線の色を、まとめて一度に、または個別に指定することができます。

border-colorは、border-top-color、border-right-color、border-bottom-color、border-left-colorという、各辺ごとの色を指定する個別のプロパティをまとめるショートハンドプロパティです。これにより、CSSコードをより簡潔に記述できます。

値の指定方法にはいくつかのパターンがあります。 一つの値を指定した場合（例: border-color: red;）は、上下左右全ての辺に同じ色が適用されます。 二つの値を指定した場合（例: border-color: red blue;）は、一つ目の値が上下の辺に、二つ目の値が左右の辺に適用されます。 三つの値を指定した場合（例: border-color: red blue green;）は、一つ目の値が上の辺に、二つ目の値が左右の辺に、三つ目の値が下の辺に適用されます。 四つの値を指定した場合（例: border-color: red blue green yellow;）は、それぞれ上、右、下、左の辺に指定された色が適用されます。

色の指定には、redのような色のキーワード、#ff0000のような16進数表記、rgb(255, 0, 0)のようなRGB関数、hsl(0, 100%, 50%)のようなHSL関数など、様々な形式を使用できます。

ただし、border-colorプロパティだけを設定しても、境界線は表示されません。境界線を表示させるためには、border-styleプロパティで線の種類（例: solidやdashedなど）をnone以外の値に設定し、必要に応じてborder-widthプロパティで線の太さを指定する必要があります。これらのプロパティと組み合わせて使用することで、意図した通りの境界線を表現することが可能となります。

Copy
1border-color: red;

引数なし

引数はありません

戻り値なし

戻り値はありません