プログラミング

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 太いボーダー
thinを指定した細いボーダーです。
mediumを指定した通常のボーダーです。
thickを指定した太いボーダーです。
7pxを指定した太いボーダーです。

関連記事
CSSにおける長さ・大きさ・角度・時間の単位について【CSS】

ボーダーの幅をまとめて指定する

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

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

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

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

値が1つの場合

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

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

値が2つの場合

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

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

値が3つの場合

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

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

値が4つの場合

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

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

関連記事
border-styleでボーダーのスタイルを指定する【CSS】
border-colorでボーダーの色を指定する【CSS】
borderでボーダーの幅・スタイル・色をまとめて指定【CSS】

Leave a Comment