border-top-widthプロパティの説明
CSSのborder-top-widthプロパティは、要素の上辺に設定した境界線（外枠、枠線）の幅、つまり太さを指定します。ボーダーの太さを指定する場合、先にborder-styleを指定しておかなければなりません。形状を省略すると初期値であるnoneが選ばれて境界線そのものが表示されません。
上下左右すべての境界線の幅を一括で指定する場合はborder-widthを、それ以外の値も含めて一括で指定する場合はショートハンド・プロパティのborderを使用して下さい。
ほかの辺に表示される境界線の幅を指定する場合は、以下のいずれかのプロパティを使用します。
border-top-width：上辺の境界線の幅を指定するborder-right-width：右辺の境界線の幅を指定するborder-bottom-width：下辺の境界線の幅を指定するborder-left-width：左辺の境界線の幅を指定する
border-top-widthに指定できる値
<line-width>- 境界線の幅を指定するキーワードあるいはデータ型の指定値です。使用できるものは以下になります。
thin- 境界線を細い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
medium- 境界線を中太の線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
thick- 境界線を太い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
<length>- CSSで使用できる単位つきの数値で指定します。ピクセル値、フォントサイズ、ビューポートに対する割合などから選べます。
border-top-widthの使い方とサンプルコード
border-top-widthプロパティの構文は以下の通りです。
/* キーワード値 */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
/* <length>値 */
border-top-width: 1px;
border-top-width: 0.5em;
border-top-width: 3pt;
border-top-width: 6vmax;
/* グローバル値 */
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: unset;
border-top-widthの実例
それでは簡単な例を見てみましょう。ここでは、要素の上辺だけに境界線を表示し、太さだけを変えた場合の挙動を確かめます。
<section class="samp_box">
<p>border-top-width</p>
<div id="border_1">thin</div>
<div id="border_2">medium</div>
<div id="border_3">thick</div>
<div id="border_4">1px</div>
<div id="border_5">5px</div>
<div id="border_6">10px</div>
</section>
.samp_box {
padding: 0 1rem;
text-align: center;
}
.samp_box > div {
margin: 1rem auto 0 auto;
padding: 2rem 1rem;
background-color: #eee;
border-top-style: solid;
}
#border_1 {
border-top-width: thin;
}
#border_2 {
border-top-width: medium;
}
#border_3 {
border-top-width: thick;
}
#border_4 {
border-top-width: 1px;
}
#border_5 {
border-top-width: 5px;
}
#border_6 {
border-top-width: 10px;
}