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プロパティでは以下の値を使うことができます。

説明
length 長さを指定するpxやemなどの単位を使い、境界線の太さを決めます。
keywords keywordsを指定して太さを決めます。

対応ブラウザ

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

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

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プロパティ: 要素の上側の境界の幅を設定します。

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング