outline-style

div.test { outline-color: red;}

値	概要
none	描画をしません。これが初期値です。
solid	1本の線でアウトラインが描画されます。
dashed	隙間が大きめの破線でアウトラインが描画されます。
dotted	隙間が小さめの破線でアウトラインが描画されます。
double	2本の線でアウトラインが描画されます。
groove	彫り込まれているようなアウトラインで描画されます。『ridge』と逆の描画です。
ridge	彫り上がっているようなアウトラインで描画されます。『groove』と逆の描画です。
inset	埋め込みされているようなアウトラインで描画されます。『outset』と逆の描画です。
outset	浮き上がっているようなアウトラインで描画されます。『inset』と逆の描画です。

※ 以下のサンプルは『outline-style』プロパティの手前に『outline: 10px red』と指定しています。

<div style="outline: 10px red; outline-style: none; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: solid; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: dashed; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: dotted; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: double; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: groove; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: ridge; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: inset; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

<div style="outline: 10px red; outline-style: outset; width: 90%; height: 100px; margin: 0 auto;">横幅90%、高さ100pxのdiv要素です。</div>

※ バージョン情報は MDN に基づいています。

アウトラインのスタイルに関する項目を指定します。アウトラインは『border』プロパティと違い、上下左右の概念はありません。

アウトラインとはボーダーの外側に描かれる境界線となります。内側ではありませんのでご注意ください。以下のボックスモデルの図の『border-top』、『border-right』、『border-bottom』、『border-left』の外側に該当します。

<div style="border: solid 5px #000; outline: solid 5px; outline-color: red; height: 100px;">ここは高さ100pxのdiv要素です。黒いボーダーの周りに赤いアウトラインが描画されていることが確認できると思います。</div>

ボーダー(境界線)とアウトラインの違いについてですが、アウトラインは大きさの概念はなくスペースを取りません。ですので他の要素に影響を与えること無く、コンテンツの周りに境界線を描画することができます。

<style scoped>
	div:hover {border: solid 5px red;}
</style>
<p>以下はボーダーが他の要素に影響を与えるというサンプルです。</p>
<div style="height: 100px; background-color: yellow;">ここは高さ100pxのdiv要素です。ここにマウスホバーをしてみてください。ボーダーが描画されてこの要素の大きさが変更されるため、周りの要素に影響を与えます。</div>
<p style="height: 100px; background-color: aqua";>ここはp要素です。</p>

<style scoped>
	div:hover {outline: solid 5px red;}
</style>
<p>以下はアウトラインが他の要素に影響を与えないというサンプルです。</p>
<div style="height: 100px; background-color: yellow;">ここは高さ100pxのdiv要素です。ここにマウスホバーをしてみてください。アウトラインが描画されますが周りの要素に影響を与えません。</div>
<p style="height: 100px; background-color: aqua";>ここはp要素です。</p>