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つ指定した場合はそれぞれ「上」「右」「下」「左」の幅になります。

関連する属性

アクセスランキング