border-bottom-style

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

本ページでは、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	〇	〇	〇	〇	〇	〇

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