はじめに
CSSには、ボーダー（border）を設定するためのプロパティがあります。
ボーダーは、要素の周囲に線を引くことで、見た目を整えるために使われます。
ボーダーには、種類や太さ、色などを指定することができます。
ここでは、CSSで利用できるボーダーの種類について解説します。
単一線のボーダー
最も基本的なボーダーは、単一線（solid）のボーダーです。単一線は、一定の太さの線が要素の周囲に引かれるもので、下記のように指定します。
border: 1px solid black;単一線（solid）
この場合、ボーダーの太さは1ピクセルで、色は黒（black）に設定されます。
複数線のボーダー
複数線のボーダーは、単一線のボーダーに比べ、複数の線が組み合わされたものです。
複数線のボーダーは、border-styleプロパティで指定することができます。
二重線のボーダー
二重線（double）のボーダーは、二本の線が重なったような見た目を持ちます。下記のように指定します。
border: 3px double blue;二重線（double）
この場合、ボーダーの太さは3ピクセルで、色は青（blue）に設定されます。
破線のボーダー
破線（dashed）のボーダーは、点線のような見た目を持ちます。下記のように指定します。
border: 2px dashed red;破線（dashed）
この場合、ボーダーの太さは2ピクセルで、色は赤（red）に設定されます。
点線のボーダー
点線（dotted）のボーダーは、小さな点が並んだような見た目を持ちます。下記のように指定します。
border: 4px dotted green;点線（dotted）
この場合、ボーダーの太さは1ピクセルで、色は緑（green）に設定されます。
個別の線の指定
個別の線に異なるスタイルを適用したい場合は、border-top、border-right、border-bottom、border-leftプロパティを使用して、それぞれの線に別々のスタイルを設定することができます。
下記の例では、左側のボーダーが二重線、その他のボーダーが破線になっています。
border-top: 3px double blue;
border-right: 2px dashed red;
border-bottom: 2px dashed red;
border-left: 3px double blue;個別の線
立体的な効果を与えるためのボーダー
grooveとridgeは、刻み目のついた線を描くスタイルで、それぞれ立体的な効果を与えるためのボーダースタイルです。これらは、ボーダーの種類としてよく使われており、CSSの標準的なプロパティとして用意されています。
以下のようにCSSプロパティを設定することで、grooveとridgeスタイルのボーダーを実装することができます。
/*grooveスタイル*/
border: 15px groove #000000;
/*ridgeスタイル*/
border: 15px ridge #000000;
groove
ridge
まとめ
CSSのボーダーには、単一線、二重線、破線、点線、二重破線など、様々な種類があります。また、個別の線に異なるスタイルを適用することもできます。ボーダーの線の太さや色も指定できるため、柔軟なデザインの実現が可能です。
