他の "Try it Yourself" 例が下にあります。
border-style プロパティは、要素の 4 つのボーダーのスタイルを設定します。このプロパティは、1 ～ 4 つの値を持つことができます。
例：
| デフォルト値： | なし |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS1 |
| JavaScript 構文： | object.style.borderStyle="dotted double" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注: IE7以前は、値"hidden"をサポートしていません。 IE8では、!DOCTYPEが必要です。IE9以降は、"hidden"をサポートしています。
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| なし | デフォルト値。ボーダーを指定しません | Play it ❯ |
| hidden | テーブル要素のボーダーが重なり合う場合の解決方法を除き "none" に同じです | Play it ❯ |
| dotted | 点線のボーダーを指定します | Play it ❯ |
| dashed | 破線のボーダーを指定します | Play it ❯ |
| solid | 実線のボーダーを指定します | Play it ❯ |
| double | 二重線のボーダーを指定します | Play it ❯ |
| groove | 3Dの窪んだように見える線のボーダーを指定します。効果は、border-color 値に依存します | Play it ❯ |
| ridge | 3D の隆起したように見える線のボーダーを指定します。効果は、border-color 値に依存します | Play it ❯ |
| inset | 領域全体が立体的に窪んだように見えるボーダーを指定します。効果は、border-color 値に依存します | Play it ❯ |
| outset | 領域全体が立体的に隆起したように見えるボーダーを指定します。効果は、border-color 値に依存します | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
要素の各辺に異なった種類のボーダーを設定します：
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;}
Try it Yourself ❯
CSS チュートリアル： CSS Border
HTML DOM リファレンス： borderStyle プロパティ