outline-colorプロパティは、アウトライン（輪郭線）の色を指定できます。
このアウトラインに関する説明はoutlineプロパティを参照してください。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<色>｜invert｜inherit

初期値

invert

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual, interactive

値の解説

<色>

キーワード（red, blueなど）かRGB数値のいずれかで指定できます。
指定方法は、「色の指定に関して」をご参照ください。

invert

該当要素との反転色になります。そのため、背景色に関わらずフォーカスを表すアウトラインが見えるようになります。

outline-colorのサンプル

p {
  margin: 20px;
}

p input {
  margin: 10px 0;
  padding: 3px 5px;
  width: 300px;
}

p input:focus {
  outline-style: solid;
  outline-width: thin;
}

p input:focus.sample01 {
  outline-color: invert;
}

p input:focus.sample02 {
  outline-color: #f00;
}

p input:focus.sample03 {
  outline-color: #0f0;
}

p input:focus.sample04 {
  outline-color: #ccc;
}

<p>
<input value="invert" size="25" name="invert" class="sample01" type="text" />
<br />
<input value="#f00" size="25" name="red" class="sample02" type="text" />
<br />
<input value="#0f0" size="25" name="green" class="sample03" type="text" />
<br />
<input value="#000" size="25" name="block" class="sample04" type="text" />
</p>

このサンプルを今見ているブラウザで表示すると以下のようになります。
:focusで指定しているので、対応ブラウザでクリックしてみたりして色が変わるのを確認してください。

サンプルのブラウザ上の表示