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

border-styleプロパティは、要素の境界線（ボーダー）のスタイルを保持するプロパティです。このプロパティは、CSSにおいて要素の周囲に表示される枠線の種類を指定するために使用されます。border-styleはショートハンドプロパティとして機能し、border-top-style、border-right-style、border-bottom-style、border-left-styleといった個別のプロパティを一度に設定できます。

指定できる境界線スタイルには、none（境界線なし）、hidden（境界線を非表示）、dotted（点線）、dashed（破線）、solid（実線）、double（二重線）といった基本的なものから、groove（立体的な溝）、ridge（立体的な隆起）、inset（要素がへこんで見える）、outset（要素が浮き上がって見える）のような立体表現まで様々です。

値を指定する方法によって、境界線の適用範囲が変わります。もし1つの値を指定した場合、上下左右すべての辺に同じスタイルが適用されます。2つの値を指定した場合は、最初の値が上下の辺に、2番目の値が左右の辺に適用されます。3つの値を指定した場合は、最初の値が上の辺に、2番目の値が左右の辺に、3番目の値が下の辺に適用されます。そして、4つの値を指定すると、それぞれ上、右、下、左の辺に時計回りの順でスタイルが適用されます。

このプロパティは、border-width（境界線の太さ）やborder-color（境界線の色）プロパティと組み合わせて使用することで、要素の視覚的な境界線を完全にカスタマイズし、Webページのデザインにおいて要素の区切りや強調を効果的に表現するために重要な役割を果たします。

Copy
1selector {
2  border-style: solid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません