outline-widthプロパティ

outline-widthプロパティはアウトラインの幅を指定するためのプロパティです。

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

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

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

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

アウトラインの太さに「thin」を指定している例です。

.element1 {
	outline-width: thin;
	outline-style: solid;
	outline-color: #5cb7ff;
}

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

アウトラインの太さに「medium」（初期値）を指定している例です。

.element2 {
	outline-width: medium;
	outline-style: solid;
	outline-color: #5cb7ff;
}

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

アウトラインの太さに「thick」を指定している例です。

.element3 {
	outline-width: thick;
	outline-style: solid;
	outline-color: #5cb7ff;
}

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

アウトラインの太さを「数値 + px」を指定している例です。

.element4 {
	outline-width: 20px;
	outline-style: solid;
	outline-color: #5cb7ff;
}

<p class="element4"></p>