border-widthでボーダーの幅を指定する【CSS】

border-width系プロパティは、ボーダーの幅（太さ）を指定できるプロパティです。

{border-top-width: 上辺の幅;}
{border-right-width: 右辺の幅;}
{border-bottom-width: 下辺の幅;}
{border-left-width: 左辺の幅;}

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

border-width系の値の指定方法

border-width系のプロパティでは、以下のような値もしくは単位付きの数値で指定します。

thinを指定した細いボーダーです。

mediumを指定した通常のボーダーです。

thickを指定した太いボーダーです。

7pxを指定した太いボーダーです。

border-widthプロパティでは、4辺のボーダー幅をまとめて指定することができます。

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

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

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

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

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

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

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

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

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

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

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