仕様

outline-styleauto | <border-style>
一括/個別個別指定プロパティ
初期値none
適用対象すべての要素(疑似要素を含む)
継承なし
百分率なし
計算値指定どおり。
補足<border-style> から hidden は除きます。

outline-style プロパティは、要素の上下左右の輪郭線の線種を設定する個別指定プロパティです。
非継承プロパティで、初期値は none なので、省略時は none が指定値となります。

outline-style で none が採用された場合、outline-width の計算値は 0 になります。
上，右，下，左に異なる値を指定する事はできません。

キーワード

  1. cdvSample000 > div { }
  1. <div class="cdvSample000">
  2. <div style="border: solid 1px;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。

例
  1. outline-style: auto;

キーワード auto を指定しました。auto は、ブラウザに輪郭線の描画を任せます。

例

<border-style> 値

  1. cdvSample210 > div { outline-width: 0.3em; outline-color: #999999; }
  1. <div class="cdvSample210">
  2. <div style="border: solid 1px;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の幅，色の指定は、線種の判り易さの為に記述しています。

例
  1. outline-style: none;

キーワード none を指定しました。none は、幅 0 で境界線を表示しません。none は、outline-style の初期値です。

例
  1. outline-style: dotted;

キーワード dotted を指定しました。dotted は、点線です。

例
  1. outline-style: dashed;

キーワード dashed を指定しました。dashed は、破線です。

例
  1. outline-style: solid;

キーワード solid を指定しました。solid は、実線(一本線)です。

例
  1. outline-style: double;

キーワード double を指定しました。double は、二本線です。

例
  1. outline-style: groove;

キーワード groove を指定しました。groove は、窪んだ線です。

例
  1. outline-style: ridge;

キーワード ridge を指定しました。ridge は、尖った線です。

例
  1. outline-style: inset;

キーワード inset を指定しました。inset は、要素が凹んで見える線です。

例
  1. outline-style: outset;

キーワード outset を指定しました。outset は、要素が凸って見える線です。

例

CSS全体のキーワード

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

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

親
子
  1. outline-style: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。外側の線は親要素の輪郭線です。

親
子
  1. outline-style: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。outline-style プロパティの初期値は none です。親要素の輪郭線のみ表示されます。

親
子
  1. outline-style: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。outline-style プロパティは非継承プロパティなので初期値の none を設定します。親要素の輪郭線のみ表示されます。

親
子