border-top-width

要素の上側に表示される境界線の幅を指定した値に設定します。
border-top-width: 10px;
これは上側に表示される境界線の幅を10ピクセルに設定する記述です。

パラメータの設定

境界線の幅
基本的に数値で指定します。
border-top-width: 10px;
border-top-width: 5em;
border-top-width: medium;
入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。
px ピクセル。ディスプレイの点を基準とした長さ。
em 要素に設定されたフォントのサイズを基準とする長さ。 フォントサイズが変わるとそれに合わせた長さとなる。
このほか、幅を設定する方法として「thin (細い)」「medium (普通)」「thick (太い)」のキーワードで指定する方法もありますが、具体的な値を設定できないため、ほぼ使用することはありません。

利用例

pxで幅を指定する
border-top-width: 10px;
border-top-style: solid;
border-top-color: #000000;
■ 表示される内容
emで幅を指定する
border-top-width: 1em;
border-top-style: solid;
border-top-color: #000000;
■ 表示される内容
em単位はフォントにあわせた長さになります。
左がフォントサイズ8ピクセルの場合、右がフォントサイズ32ピクセルの場合です。
単位の付け忘れ
border-top-width: 10;
border-top-style: solid;
border-top-color: #000000;
■ 表示される内容
設定が反映されません。単位の付け忘れに注意しましょう。
キーワードで幅を指定する
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
■ 表示される内容
thin
medium
thick
左から順にthin、medium、thickを設定した場合。

関連する属性

アクセスランキング