border-top

CSSでは、ボックス上に枠線を表示して、色や太さを指定することができます。

本ページでは、border-topプロパティについて説明します。

border-topプロパティとは

border-topプロパティを使うと、ボックス上側の枠線(境界線)を表示して、色や太さを指定することができます。

四角い箱の上に赤い線があり、その上にborder-topと表示されています。

border-topは、border-top-widthと、border-top-styleborder-top-colorを一括して設定できます。

border-topの定義は、以下のとおりです。

【border-topの定義】
line-width || line-style || CSSで指定できる色
初期値 medium none colorプロパティの値
適用対象 すべての要素
継承 しない

値の説明

以下は、border-topで使える値と説明です。

line-width
境界線の太さです。使える値は、border-top-widthと同じです。
line-style
境界線の種類です。使える値は、border-top-styleと同じです。
CSSで指定できる色
境界線の色です。使える値は、border-top-colorと同じです。

これらの値は、3つとも必須という訳ではなく、1つや2つだけ指定することも可能です。指定する順序も決まっていません。

省略した値は、初期値が使われます。

利用例

border-topの利用例は、以下のとおりです。

【border-topの利用例】
.test {
  border-top: 2px solid red;
}

上記は、以下のように表示されます。

「テストです。」と表示された上側に、境界線が2pxの太さで赤色で表示されています。

段落の上に、境界線が2pxの太さで赤色で表示されています。

以下は、2つだけ指定した例です。

【border-topで2つだけ指定した例】
.test {
  border-top: dotted red;
}

上記であれば、境界線はデフォルトのmedium(普通は3px)の太さで、点線の赤色で表示されます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
border-top
【スマートフォン】
項目 Sa An Op Ch Fx Sm
border-top
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る