仕様

outline-color<color> | invert
一括/個別個別指定プロパティ
初期値invert(サポートしてない場合はcurrentColor)
適用対象すべての要素(疑似要素を含む)
継承なし
百分率なし
計算値invert の計算値は invert です。currentColor の計算値は currentColor です。基本カラーキーワード、RGB 16進値、および拡張カラーキーワードの計算値は、RGB値の3つ組に相当します。transparent の計算値は、rgba(0,0,0,0)です。他のすべての値の場合、計算値は指定された値です。

outline-color プロパティは、要素の上下左右の輪郭線の色を設定する個別指定プロパティです。
非継承プロパティで、初期値は currentColor なので、省略時は currentColor が指定値となります。
(invert をサポートしていれば、outline-color の初期値は invert です。)

currentColor の計算値はそのまま currentColor であり、要素の color の値に置き換わるのは使用値です。
currentColor は、その要素の color の使用値を用いるので、color が継承プロパティである事から親要素の影響を受ける事があります。
上，右，下，左に異なる値を指定する事はできません。

<color> 値

  1. cdvSample010 > div { outline-style: solid; }
  1. <div class="cdvSample010">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。

例
  1. outline-color: red;

色キーワード red を１つ指定しました。red は RGB 16 進表記で #ff0000 です。

例
  1. outline-color: #ff0000ff;

RGB 16 進表記 で値を１つ指定しました。#ff0000ff は #ff0000 とも #f00f とも同じです。#ff0000 は下の２桁(ff)の省略で #f00f は短縮形です。

例
  1. outline-color: rgba(255,0,0,1.0);

関数表記 で値を１つ指定しました。rgba(255,0,0,1.0) は #ff0000ff と同じです。

例
  1. outline-color: transparent;
  2. color: #ff0000;

キーワード transparent を１つ指定しました。transparent は完全な透明色を表すキーワードです。

例
  1. outline-color: currentColor;
  2. color: #ff0000;

キーワード currentColor を１つ指定しました。currentColor は前景色(要素の color プロパティの値)を表すキーワードです。currentColor は outline-color プロパティの初期値です。(invert をサポートしていれば、outline-color の初期値は invert です。)

例

キーワード

  1. cdvSample430 > div { padding: 1em; }
  2. cdvSample430 > div > div { outline-style: solid; }
  1. <div class="cdvSample430">
  2. <div style="">親<div style="">子</div></div></div>

例示の雛型です。親要素と子要素のstyle属性を書き換えて例示しています。
親要素は invert の色反転の確認の為に記述しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。

親
子
  1. <div style="background-color: #0000ff;">親<div style="outline-color: invert; color: #ff0000;">子</div></div></div>

キーワード invert を１つ指定しました。invert は、画面上のピクセルで色反転を実行することが期待されています。invert は outline-color プロパティの初期値です。(invert をサポートしていなければ、outline-color の初期値は currentColor です。)

親
子

CSS全体のキーワード

  1. cdvSample021 > div { padding: 1em; outline: solid #0000ff; }
  2. cdvSample021 > div > div { outline-style: solid; }
  1. <div class="cdvSample021">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。親要素の輪郭線の記述は、継承の確認の為に記述しています。

親
子
  1. outline-color: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. outline-color: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。outline-color プロパティの初期値は currentColor です。(invert をサポートしていれば、outline-color の初期値は invert です。)

親
子
  1. outline-color: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。outline-color プロパティは非継承プロパティなので初期値の currentColor を設定します。(invert をサポートしていれば、outline-color の初期値は invert です。)

親
子