border-styleでボーダーのスタイルを指定する【CSS】

border-style系のプロパティは、ボーダーのスタイル、破線だったり点線だったり、いろいろなボーダーを指定できるプロパティです。

{border-top-style: スタイル;}
{border-right-style: スタイル;}
{border-bottom-style: スタイル;}
{border-left-style: スタイル;}

それぞれ上辺（top）、右辺（right）、下辺（bottom）、左辺（left）のスタイルを指定できます。

border-styleの値の指定方法

border-style系プロパティでは以下のような値を指定できます。

none

noneを指定するとボーダーは表示されません。

他のボーダーと重なる場合は、他の値が優先されます。

hidden

hiddenを指定すると、noneと同様表示されません。

他のボーダーと重なる場合は、他の値が優先されます。

solid

solidを指定すると、1本の実線のボーダーが表示されます。

実線のボーダーです。

double

doubleを指定すると、2本の実線のボーダーが表示されます。

二重線のボーダーです。

dotted

dottedを指定すると、点線のボーダーが表示されます。

点線のボーダーです。

dashed

dashedを指定すると、破線のボーダーが表示されます。

破線のボーダーです。

groove

grooveを指定すると、立体的にくぼんだ線のボーダーが表示されます。

立体的にくぼんだ線のボーダーです。

ridge

ridgeを指定すると、立体的に隆起した線のボーダーが表示されます。

立体的に隆起した線のボーダーです。

inset

insetを4辺すべてに指定すると、ボーダーの内部が立体的にくぼんだように表示されます。

内部が立体的にくぼんだボーダーです。

outset

outsetを4辺すべてに指定すると、ボーダーの内部が立体的に隆起したように表示されます。

内部が立体的に隆起したボーダーです。

ボーダースタイルをまとめて指定する

border-styleプロパティでは、先ほどボーダーのスタイルを4辺で指定していたものを、まとめて指定することができます。

{border-style: -上辺(top) -右辺(right) -下辺(bottom) -左辺(left);}

指定できる値はborder-style系プロパティで各辺に指定できる値と同じで、それぞれの値を半角スペースで区切って指定します。

必ずしも4つの値を指定する必要はなく、指定する値の数によって適用のされ方が異なります。

値が1つの場合

値を1つしか指定しない場合、すべての辺に同じ値が適用されます。

{border-style: 上下左右辺;}

値が2つの場合

値を2つ指定する場合、1つ目の値が上下辺、2つ目の値が左右辺に適用されます。

{border-style: 上下辺左右辺;}

値が3つの場合

値を3つ指定する場合、1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。

{border-style: 上辺左右辺下辺;}

値が4つの場合

値を4つ指定する場合、上辺、右辺、下辺、左辺の順番に値が適用されます。

{border-style: 上辺右辺下辺左辺;}