border-style
CSSでは、ボックスの上下左右に枠線を表示することができます。
本ページでは、border-styleプロパティについて説明します。
border-styleプロパティとは
border-styleプロパティを使うと、ボックスの上下左右に枠線(境界線)を表示することができます。
border-styleは、border-top-style、border-right-style、border-bottom-style、border-left-styleを一括で指定できます。
border-styleの定義は、以下のとおりです。
値 | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
---|---|
初期値 | none |
適用対象 | すべての要素 |
継承 | しない |
値は、半角スペースで区切って1〜4つまで、複数のキーワードを組み合わせて並べることができます。指定方法は、以下のとおりです。
指定方法 | 説明 |
---|---|
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プロパティ一覧」に戻る