border-style

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

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

border-styleプロパティとは

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

四角い箱の周りが赤い線で囲まれていて、赤い線の部分が境界線と説明されています。

border-styleは、border-top-styleborder-right-styleborder-bottom-styleborder-left-styleを一括で指定できます。

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

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

値は、半角スペースで区切って1〜4つまで、複数のキーワードを組み合わせて並べることができます。指定方法は、以下のとおりです。

【border-styleの指定方法】
指定方法 説明
border-style:solid dotted double dashed 上、右、下、左(上から時計回り)
border-style:solid dotted double 上、左右、下
border-style:solid dotted 上下、左右
border-style:solid 上下左右すべてが同じ境界線の種類

例えば、border-style:solid dotted double dashedでは、上が一本線、右が点線、下が二重線、左が破線で表示されます。

値の説明

以下は、border-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-styleの利用例は、以下のとおりです。

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

以下に、noneとhidden以外を使った時の表示例を示します。なお、わかりやすいように、ボーダー領域を8pxにしています。また、groove以下はくぼみなどがわかりやすいように境界線の色を白にしています。

dotted
dashed
solid
double
groove
ridge
inset
outset

ブラウザのサポート状況

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

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

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

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