outline

概要

CSS の outline プロパティは、次の細分化されたプロパティを 1 つ以上同時に設定するための簡略化プロパティです：outline-style、outline-width、outline-color。ほとんどの場合このショートカットを使うのが望ましく、より便利です。

アウトラインとボーダーには次の違いがあります:

アウトラインは場所を占有せず、コンテンツの上に描かれます
アウトラインは矩形ではないかもしれません。Gecko/Firefox では矩形です。しかし例えば Opera は、以下のように矩形でない形状を対象の周りに描きます:
TEXTTEXTTEXT

初期値	以下の各プロパティのショートハンドとして補完します: `outline-color`: invertOrCurrentColor `outline-style`: `none` `outline-width`: `medium`
適用対象	全要素
継承	不可
メディア	visual, interactive
計算値	以下の各プロパティのショートハンドとして補完します: `outline-color`: キーワード `invert` が指定されると計算値も `invert`。色が指定されると、半透明なら、計算値はそれに一致する`rbga()` で、不透明なら、それに一致する `rgb()`。キーワード `transparent` は `rgb(0,0,0)` にマップされます `outline-width`: 絶対的 length。キーワード `none` が指定されると計算値は `0` になります `outline-style`: 指定値
アニメーションの可否	以下の各プロパティのショートハンドとして補完します: `outline-color`: 可。の値として補完しますcolor `outline-width`: 可。の値として補完しますlength `outline-style`: 不可
正規順序	order of appearance in the formal grammar of the values

形式文法: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

1 つから 3 つの値を任意の順序で渡します:

<'outline-width'>: outline-width をご覧ください
<'outline-style'>: outline-style をご覧ください
<'outline-color'>: Gecko 1.9 (Firefox 3) から、要素の color プロパティ（前景色）の値が使われます。outline-color をご覧ください。

outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;

/* 以下 2 つは同じ定義です */

:link:hover { outline: 1px solid #000 }
:link:hover { outline: solid black 1px }

仕様書	策定状況	コメント
CSS Basic User Interface Module Level 3 The definition of 'outline' in that specification.	勧告候補	変更なし
CSS Level 2 (Revision 1) The definition of 'outline' in that specification.	勧告

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本サポート	1.0	1.5 (1.8)	8.0	7.0	1.2 (125)

機能	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本サポート	1.0	1.0 (1.8)	8.0	6.0	3.1

Gecko 1.8 (Firefox 1.5) 以前では、Mozilla CSS Extension の -moz-outline を使って似た効果を実現できます。