outline-colorプロパティ

outline-colorプロパティは要素のアウトラインに色を指定するプロパティです。

outline-colorプロパティに指定できる値

outline-colorプロパティには次の値を色として指定することができます。

値	内容
`invert`	初期値。アウトラインの色を背景色を反転させた色にする。`invert`をサポートしていないブラウザでは無色として表示。
カラー名	アウトラインの色を「`black`」や「`red`」などで指定。
カラーコード	親要素に対する割合で最大幅を指定。

アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。
親要素のmarginプロパティやpaddingプロパティの領域に重なる点に注意してください。

また、outline-colorプロパティは上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。

アウトラインの色を「invert」と指定している例です。

.element1 {
  outline-style: solid;
  outline-color: invert;
}

<p class="element1"></p>

ブラウザで表示すると以下のような表示になります。

アウトラインの色をカラーコードで指定している例です。

.element2 {
  outline-style: solid;
  outline-color: #005599;
}

<p class="element2"></p>

ブラウザで表示すると以下のような表示になります。

アウトラインの色をカラー名で指定している例です。

.element3 {
  outline-style: solid;
  outline-color: yellow;
}

<p class="element3"></p>

ブラウザで表示すると以下のような表示になります。