border-topとは?基本的な使い方や値を指定する方法を解説

要素の上側のボーダーのスタイル・太さ・色を指定するborder-top。 
 
意味や役割はなんとなくわかるけど、正しい使い方を知らない人も多いでしょう。 

・border-topってどんなプロパティなの? 
・具体的な使い方を知りたい・・・。 
・borderとの違いは?

こんな疑問を持っていませんか? 
 
今回は、border-topの

・基本的な使い方
・borderとの違い
・border-topで値を指定する様々な方法

について説明します。

border-topとは

border-topとはどういったプロパティなのか、詳しく知らない人も多いでしょう。

なのでここでは、border-topの意味や役割について解説していきます。

border-topの読み方

border-topは「ボーダー・トップ」と読みます。

「border」は「枠線・ボーダー」、「top」は「頂点・てっぺん」という意味があり、CSSでは「border-top」を上側のボーダーという意味で使われています。

例えば、要素の上側のボーダーのスタイルや太さ、色などを指定したいときに、使われることが多いです。

border-topは上側のボーダーのスタイル・太さ・色を指定するプロパティ

border-topは上側のボーダーのスタイル・太さ・色を指定するプロパティです。

border-topを指定すると、上側のボーダーのスタイル・太さ・色をまとめて指定することができます。

例えばスタイルであれば、二重線や点線、破線などを指定することが可能です。

そして、太さは数値やキーワードを指定して、好きな太さに変えることができます。

また、色の場合は色の名前や#FFFFFF、rgb(r,g,b)などで指定することが可能です。

border-topで利用できる値

border-topでは以下の値を使うことができます。

説明
none hidden キーワードと同様に、境界線を表示しません。 background-image を設定している場合を除き、プロパティで別に指定していても border-width の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden none キーワードと同様に、境界線を表示しません。 background-image を設定している場合を除き、プロパティで別に指定していても border-width の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted 連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の border-width の計算値の半分です。
dashed 短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid 1本の直線、実線を表示します。
double 2本の直線を表示し、幅の合計は border-width で定義したピクセル数になります。
groove 凹んだように見える境界線を表示します。 ridge の逆です。
ridge 出っ張ったように見える境界線を表示します。 groove の逆です。
inset 要素が埋め込まれて見える境界線を表示します。 outset の逆です。 border-collapse が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset 要素が出っ張って見える境界線を表示します。 inset の逆です。 border-collapse を collapsed に設定したテーブルセルに適用すると、この値は ridge のようにふるまいます。
thin 細い境界線
medium 中くらいの境界線
thick 太い境界線
color 上の境界線の色を定義します。

対応ブラウザ

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

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

border-topの基本的な使い方

border-topの意味や役割についてわかりました。

なのでここでは、実際にborder-topの使い方を解説していきます。

まだ使い方を知らない人は、しっかりと理解していきましょう。

border-topの使い方

border-topを指定するときはborder-top: style(スタイル)width(太さ)color(色);の順に記述します。

実際の使い方をコードで見ていきましょう。

今回は例として、pタグを用意します。

そして、そのpタグに「border-top: solid 10px lightblue;」と指定してみましょう。

結果は次のように表示されます。

pタグに値を「solid 10px lightblue」と指定したので、スタイルは1本線、太さは10px、色は水色のボーダーになっていますね。

このようにborder-topを指定すれば、要素の上側のボーダーのスタイル・太さ・色をまとめて指定することができます。

様々な値を指定することで表示の仕方を変えられるので、使い方を覚えておきましょう。

※その他の値の指定方法は後ほど解説します。

border-topとborderの違い

border-topとよく似たプロパティで、borderというものがあります。

borderは、要素のボーダーのスタイル・太さ・色をまとめて指定するプロパティです。

ここでは、このborder-topとborderにどのような違いがあるのか解説します。

borderの実際の使い方をコードで見ていきましょう。

borderを指定するときも、「border: style(スタイル)width(太さ)color(色);」の順に記述します。

例として、pタグを用意し「border: solid 10px lightblue;」と指定してみましょう。

結果は次のようになります。

border-topのときと違い、要素の上下左右すべてのボーダーにスタイルや太さ、色などが指定されていますね。

このようにborderは、ボーダーのスタイル・太さ・色をまとめて指定することができます。

要素の上側のボーダーを指定したいときはborder-top、上下左右すべてのボーダーをまとめて指定したいときはborderというように使い分けるといいでしょう。

border-topで値を指定する様々な方法

ここまでで、border-topの基本的な使い方についてわかりました。

なのでここからは、border-topで値を指定する様々な方法を解説していきます。

スタイルの指定方法

まずは、スタイルの指定方法です。

border-topで指定できるスタイルは、以下の通り。

  • ・none:ボーダーは非表示になり、太さも0になる(初期値)
  • ・hidden:ボーダーは非表示になり、太さも0になる
  • ・dotted:点線
  • ・dashed:破線
  • ・solid:1本線
  • ・double:2本線
  • ・groove:立体的に窪んだ線
  • ・ridge:立体的に隆起した線
  • ・inset:囲まれた領域全体が立体的に窪んだように表示される
  • ・outset:囲まれた領域全体が立体的に隆起したように表示される

それぞれの使い方をコードで見ていきましょう。

例として、pタグを用意し、それぞれにクラス名をつけます。

そして、そのpタグに「border-top」を指定し、値を設定してみましょう。

結果は次のように表示されます。

指定した値によって、表示の仕方が異なっていますね。

このように、border-topでは様々なスタイルを指定することができます。

スタイルを変えることでサイトも見やすくなるので、使い方を覚えておくといいでしょう。

太さの指定方法

続いて、太さの指定方法です。

border-topで太さを指定するときは、数値またはキーワードで指定できます。

数値の場合はpxやem、キーワードの場合は以下の値を指定することが可能です。

  • ・thin:細い線
  • ・medium:中くらいの線(初期値)
  • ・thick:太い線

それぞれの値の指定方法をコードで見ていきましょう。

例として、pタグを用意し「border-top」を指定します。

今回は、値を「40px」「1em」「thin」「medium」「thick」と指定してみました。

すると、結果は次のようになります。

40pxと指定したpタグは、太さ40pxのボーダーになっています。

そして、emはフォントの高さを1とした単位なので、1emと指定したpタグはフォント1つ分の太さのボーダーになっていますね。

また、「thin」「medium」「thick」と指定したpタグは、それぞれ「細い」「中くらい」「太い」ボーダーになっています。

このように、border-topでは自在にボーダーの太さを調整することも可能なので、使い方を覚えておくといいでしょう。

色の指定方法

今度は、色の指定方法です。

border-topで色を指定する場合は、色の名前#FFFFFFrgb(r,g,b)などの指定が可能です。

それぞれの指定方法をコードで見ていきましょう。

例として、pタグを用意し「border-top」を指定します。

そして、それぞれのpタグに色を「lightblue」「#ff5533」「rgb(0, 100, 250)」と指定してみます。

すると、結果は次のようになるでしょう。

指定した値によって、ボーダーの色が異なっていますね。

このようにborder-topは、自分の好きな色を指定することができます。

なので、使い方を覚えておきましょう。

まとめ

今回は、border-topの意味や使い方について徹底解説しました。 

border-topは、要素の上側のボーダーのスタイル・太さ・色をまとめて指定するプロパティです。

上下左右ある中の、上側のボーダーのスタイルや太さ、色をまとめて指定したいときに役立ちます。 

なので、使い方を覚えておくといいでしょう。 

この記事がborder-topの学習に役立つと幸いです。 

参考文献:MDN web docs|border-top – CSS:カスケーディングスタイルシート