CSS3：outline-colorプロパティ

上に示された各種外形線プロパティにより作成される外形線は、ボックスの“上から”描かれる ― すなわち外形線は、常に手前にあり、ボックスや他のボックスの位置やサイズには波及しない。従って、外形線の表示の有無が変わっても、リフローが生じることはない。

名前	`outline-color`
値	<color> \| invert
初期値	invert
適用対象	すべての要素
継承	されない
百分率	受容しない
算出値	invert に対しては invert。<color> 値に対しては算出色 [CSS-COLOR-4]
正準的順序	文法に従う
アニメーション型	算出値の型による

開始<SPAN style="border:1px solid red;
 outline-color:#aa0;
 outline-style:dotted;
 outline-width:10px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-color:#aa03;
 outline-style:dotted;
 outline-width:10px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-color:green;
 outline-style:dotted;
 outline-width:10px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-color:rgb(50 100 255);
 outline-style:dotted;
 outline-width:10px;
">テスト</SPAN>終了

輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。

開始<SPAN style="border:1px solid red;
 outline-color:invert;
 outline-style:dotted;
 outline-width:10px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-color:invert;
 outline-style:dotted;
 outline-width:10px;
 background-color:yellow;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 outline-color:invert;
 outline-style:dotted;
 outline-width:10px;
 color:yellow;
">テスト</SPAN>終了

¶説明と違う

ユーザーエージェントは、利用者にフォーカスの概念を伝えるものとして適切な領域を囲うような、外形線を決定するアルゴリズムを利用するべきである。

outline-color プロパティは、すべての色（<color>）に加え、キーワード invert も受容する。invert は、スクリーン画素色の反転を遂行するものと期待される。これは、色背景に関わらずフォーカスボーダーが可視になるのを確保するために、よくとられる技法である。

適合ユーザーエージェントは、スクリーン上の画素色の反転をサポートしないプラットフォーム上では、invert 値を無視してもよい。

invert 値をサポートしないユーザーエージェントは，その値を構文解析時に却下するものとする ― その場合の outline-color プロパティの初期値は、キーワード currentcolor とする。

スクリプト：

スクリプト：