border-top

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

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

border-topプロパティとは

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

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

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

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

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

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

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

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

【border-topの利用例】

.test {
  border-top: 2px solid red;
}

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

段落の上に、境界線が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	〇	〇	〇	〇	〇	〇

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