他の "Try it Yourself" 例が下にあります。
アウトラインは、要素を「目立たせる」ために要素の周り（ボーダーの外）に引く線です。
outline-style プロパティは、アウトラインのスタイルを指定します。
| デフォルト値： | なし |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS2 |
| JavaScript 構文： | object.style.outlineStyle="dashed" Try it |
アウトラインは、要素を囲む線で、マージンの周りに表示されます。 しかし、borderプロパティとは異なります。
アウトラインは、要素の大きさの一部ではないので、 要素のwidthとheightプロパティは、アウトラインの幅を含みません。
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
注: IE8 は、!DOCTYPEを指定した場合のみ outline-style をサポートします。
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| なし | アウトラインを指定しません。これがデフォルトです | Play it ❯ |
| hidden | アウトラインを指定しません | Play it ❯ |
| dotted | 点線のアウトラインを指定します | Play it ❯ |
| dashed | 破線のアウトラインを指定します | Play it ❯ |
| solid | 実線のアウトラインを指定します | Play it ❯ |
| double | 二重線のアウトラインを指定します | Play it ❯ |
| groove | 窪んだように見えるアウトラインを指定します。効果は outline-color の値に依存する | Play it ❯ |
| ridge | 隆起したように見えるアウトラインを指定します。効果は outline-color の値に依存する | Play it ❯ |
| inset | 内側が窪んだように見えるアウトラインを指定します。効果は outline-color の値に依存する | Play it ❯ |
| outset | 内側が隆起したように見えるアウトラインを指定します。効果は outline-color の値に依存する | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
いろいろな値を使用し、アウトラインのスタイルを設定します：
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Try it Yourself ❯
CSS チュートリアル： CSS Outline
CSSリファレンス：outline プロパティ
HTML DOM リファレンス：outlineStyle プロパティ