border-top-widthプロパティとは？使い方を詳しく解説！

border-top-widthプロパティを使用すると、境界線の上側の太さを変えられます。ですが、CSS初心者の方には

と疑問を抱く方がいるでしょう。

そこで今回は、border-top-widthプロパティの

について説明します。

border-top-widthプロパティとは

border-top-widthプロパティの読み方

border-top-widthの読み方は、「ボーダー-トップ-ウィドゥス」です。

borderという言葉が含まれているプロパティは、おおよそ境界線に関する設定を行います。

border-top-widthプロパティの説明

border-top-widthプロパティは、

際に使います。

border-top-widthプロパティで太さを変えることで、見たときの印象が違います。情報をより強調させるなど、使い方は多数存在します。

border-top-widthプロパティを使うためには、他のプロパティも設定する必要があります。

設定の仕方については、「border-top-widthプロパティの基本的な使い方」から詳しく解説していきます。

border-top-widthプロパティで利用できる値

border-top-widthプロパティでは以下の値を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

border-top-widthプロパティの基本的な使い方

border-top-widthプロパティの使い方

border-top-widthプロパティの使い方が分かるように、以下にコードを記述していきます。

See the Pen
border-top-widthプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.

border-top-widthプロパティの設定は、以下のように書きます。

境界線の上側を太くするには、「幅」「高さ」「境界線のスタイル・太さ・色」の設定も必要になります。

上記の設定によって、境界線が反映されます。

border-top-widthプロパティ以外で境界線の上側の太さを変えられる

border-top-widthプロパティ以外で、境界線の上側の太さを変える方法があります。

See the Pen
border-top-widthプロパティ以外で境界線の上側の太さを変える by 吉井大輝 (@DaiW)
on CodePen.

「.box2」で設定しているborder-widthプロパティで、border-top-widthプロパティと同様の設定が可能です。

border-widthプロパティは、上下左右の境界線の太さをまとめて変えられます。

border-widthプロパティの値が4つならば、「上側」「右側」「下側」「左側」の順に境界線の太さを指定します。

値の数によって指定する境界線も変わってきます。

border-top-widthプロパティの他にもborder-widthプロパティで設定ができることを覚えていてください。

border-top-widthプロパティの応用的な使い方

border-top-widthプロパティの値にkeywordsを指定する

border-top-widthプロパティの値にlengthではなく、keywordsを指定したコードを記述していきます。

See the Pen
border-top-widthプロパティの値にkeywordsを指定する by 吉井大輝 (@DaiW)
on CodePen.

上から順に「細い」「中くらい」「太い」境界線を指定しています。

細かく境界線の太さを変えたいとき、pxやemなどの単位を使うと良いでしょう。

ですが、大まかな太さで良いならば、keywordsを指定して太さを変えてみてください。

まとめ

いかがでしたでしょうか？

今回、基本的な使い方や他にできる境界線の太さの変え方についてご紹介しました。

border-top-widthプロパティの使い方を覚えることで、サイトデザインの選択肢の一つになります。

境界線の太さを変える設定は、記述しましたコードを参考にすれば、CSS初心者の方も設定できるでしょう。

border-top-widthプロパティの習得に役立ててもらえたら幸いです。

参考文献：MDN web docs｜border-top-widthプロパティ: 要素の上側の境界の幅を設定します。