CSSのborderプロパティは、HTML要素に枠線を描くためのプロパティです。このプロパティには、枠線のスタイルを指定するためのborder-styleという属性があります。
border-style属性の種類
border-style属性には、以下の9つの種類があります。
- none：枠線なし
- solid：実線
- dotted：点線
- dashed：破線
- double：2本の線
- groove：立体的にくぼんだ線
- ridge：立体的に隆起した線
- inset：内側全体がくぼんだ線
- outset：外側全体が隆起した線
oneは、枠線を完全に非表示にします。
solidは、1本の線で枠線を描きます。
dottedは、ドット状の線で枠線を描きます。
dashedは、破線で枠線を描きます。
doubleは、2本の線で枠線を描きます。
grooveは、立体的にくぼんだ線で枠線を描きます。
ridgeは、立体的に隆起した線で枠線を描きます。
insetは、内側全体がくぼんだ線で枠線を描きます。
outsetは、外側全体が隆起した線で枠線を描きます。
border-style属性の使い方
border-style属性は、値を1つまたは2つ以上指定して使用します。
値を1つ指定した場合は、上下左右の枠線のスタイルがすべて同じになります。
値を2つ以上指定した場合は、値をスペースで区切って指定し、順番に上、右、下、左の枠線のスタイルを指定します。
例えば、以下のコードは、div要素に実線の枠線を描きます。
div {
border-style: solid;
}また、以下のコードは、div要素に上下左右で異なるスタイルの枠線を描きます。
div {
border-style: solid dashed dotted double;
}このように、border-style属性を使いこなすことで、HTML要素にさまざまなスタイルの枠線を描くことができます。
まとめ
border-style属性は、CSSで枠線のスタイルを指定するための重要な属性です。この属性を使いこなすことで、HTML要素にさまざまなスタイルの枠線を描くことができます。
