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

borderプロパティは、HTML要素の境界線（ボーダー）に関するスタイルをまとめて設定するために使用するプロパティです。CSSのショートハンドプロパティの一つであり、border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つのプロパティの値を一度に指定できます。これにより、個別のプロパティを複数記述する手間を省き、CSSコードを簡潔にし、可読性を向上させることが可能です。

具体的な記述形式は、border: <border-width> <border-style> <border-color>;となります。例えば、border: 2px solid red;と指定した場合、対象のHTML要素の上下左右すべての境界線に、太さ2ピクセルの実線（solid）で、色は赤色（red）のボーダーが適用されます。これは、border-width: 2px;、border-style: solid;、border-color: red;という3行の記述と全く同じ効果を持ちます。

このプロパティは、ウェブページの要素を視覚的に区切ったり、特定の要素を強調したりする際に非常に頻繁に利用されます。また、borderプロパティの他にも、特定の辺（例：上辺、下辺）のみにボーダーを設定できるborder-topやborder-bottomといった個別のショートハンドプロパティも存在します。これらの個別プロパティも同様に、その辺に対する太さ、種類、色をまとめて指定できます。borderプロパティは、ウェブデザインの基礎となる要素スタイリングにおいて不可欠なプロパティの一つです。

Copy
1border: 1px solid black;

引数なし

引数はありません

戻り値なし

戻り値はありません