border-bottom-style

CSSでは、ボックスの下に枠線を表示することができます。

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

border-bottom-styleプロパティとは

border-bottom-styleプロパティを使うと、ボックスの下側に枠線(境界線)を表示することができます。

border-bottom-styleの説明

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

【border-bottom-styleの定義】
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値 none
適用対象 すべての要素
継承 しない

値の説明

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

none
境界線を表示しません。境界線の幅(ボーダー領域)も0になります。表で使った時で、border-collapse:collapse(罫線を共有する)の時、noneは非優先です。つまり、周囲のセルでborder:solidなどが指定されていると、罫線は表示されます。
hidden
境界線を表示しません。境界線の幅(ボーダー領域)も0になります。表で使った時で、border-collapse:collapseの時、hiddenは優先されます。つまり、周囲のセルでborder:solidなどが指定されていても、罫線は表示されません。
dotted
点線で表示します。
dashed
破線で表示します。
solid
一本線(実線)で表示します。
double
二重線で表示します。
groove
谷型に見える線で表示します。
ridge
山型に見える線で表示します。
inset
左と上の線が濃く、右と下の線が薄くなります。四方に枠をつけると、内部がくぼんだように見えます。
outset
左と上の線が薄く、右と下の線が濃くなります。四方に枠をつけると、内部が隆起したように見えます。

利用例

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

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

以下に、noneとhidden以外を使った時の表示例を示します。なお、grooveとridgeは、違いがわかりやすいように、境界線の色を白にしています。

dotted
dashed
solid
double
groove
ridge
inset
outset

ブラウザのサポート状況

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

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

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

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