border-width : 境界線の幅を設定する - PEKO STEPのCSSリファレンス

border-width

要素の周囲に表示される境界線の幅を指定した値に設定します。

border-width: 10px;

これは要素の周囲に表示される境界線の幅を10ピクセルに設定する記述です。

また、border-widthは4方向の境界線にそれぞれ別の幅を設定することができます。

border-width: 10px 10px 10px 10px;
border-width: 10px 10px 10px;
border-width: 10px 10px;
border-width: 10px;

値を4つ設定した場合はそれぞれ「上」「右」「下」「左」に設定されます。
値を3つ設定した場合はそれぞれ「上」「左右」「下」に設定されます。
値を2つ設定した場合はそれぞれ「上下」「左右」に設定されます。
値が1つの場合は全方向同じ幅になります。

境界線の幅

基本的に数値で指定します。

border-width: 10px;
border-width: 5em;
border-width: medium;

入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。

px	ピクセル。ディスプレイの点を基準とした長さ。
em	要素に設定されたフォントのサイズを基準とする長さ。フォントサイズが変わるとそれに合わせた長さとなる。

このほか、幅を設定する方法として「thin (細い)」「medium (普通)」「thick (太い)」のキーワードで指定する方法もありますが、具体的な値を設定できないため、あまり使用することはありません。

幅を1つ指定した場合

border-width: 2px;
border-style: solid;
border-color: #000000;

■ 表示される内容

1つだけ指定した場合は全方向すべて同じ幅になります。

幅を2つ指定した場合

border-width: 2px 5px;
border-style: solid;
border-color: #000000;

■ 表示される内容

2つ指定した場合はそれぞれ「上下」「左右」の幅になります。

幅を3つ指定した場合

border-width: 2px 5px 10px;
border-style: solid;
border-color: #000000;

■ 表示される内容

3つ指定した場合はそれぞれ「上」「左右」「下」の幅になります。

幅を4つ指定した場合

border-width: 2px 5px 10px 15px;
border-style: solid;
border-color: #000000;

■ 表示される内容

4つ指定した場合はそれぞれ「上」「右」「下」「左」の幅になります。