border-bottom

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

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

border-bottomプロパティとは

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

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

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

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

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

値の説明

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

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

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

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

利用例

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

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

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

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

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

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

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

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

ブラウザのサポート状況

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

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

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

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