outline-style：アウトラインの形状を指定する

X
f
LINE
B!
p

初期値	`none`
適用対象	全ての要素
継承	しない
アニメーション	離散値
対応ブラウザ	caniuseで確認

outline-styleプロパティの説明

outline-styleは、アウトラインの形状を指定します。アウトラインは、色や形状、太さといった装飾の値を持ちますが、要素のボックスやコンテンツのレイアウトには影響を与えません。

outline-styleの値を省略すると、既定値がnoneであるため表示されません。アウトラインを表示させたい場合は、必ず何らかの値を明示して下さい。

アウトラインの装飾に関するプロパティは以下の通りです。

outline：まとめて指定
outline-color：アウトラインの色
outline-style：アウトラインの形状
outline-width：アウトラインの太さ

outline-styleに指定できる値

auto: ブラウザの自動処理に任せます。
none: アウトラインを描画しません。色や太さを変えても、この値が指定されている限りアウトラインの幅は0とみなされます。これが初期値です。
solid: 一本の実線でアウトラインを描画します。
dashed: 破線でアウトラインを描画します。
dotted: 点線でアウトラインを描画します。
double: 二重の実線でアウトラインを描画します。
groove: アウトラインの中央が凹んでいるように見える直線を表示します。光源が右下に置かれており、左上に影が落ちます。この時、outline-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはridgeの逆です。
ridge: アウトラインの中央が隆起しているように見える直線を表示します。光源が左上に置かれており、右下に影が落ちます。この時、outline-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはgrooveの逆です。
inset: 要素が押し込まれて見えるように明暗を分けたアウトラインを表示します。表現的にはoutsetの逆です。
outset: 要素が出っ張って見えるように明暗を分けたアウトラインを表示します。表現的にはinsetの逆です。

outline-styleの使い方とサンプル

outline-styleプロパティの構文は以下の通りです。

CSS

/* キーワード値 */
outline-style: auto;
outline-style: none;
outline-style: solid;
outline-style: dashed;
outline-style: dotted;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* グローバル値 */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: unset;

outline-styleの実例

それでは実際にoutline-styleプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾をfocus-visibleセレクタで上書きした時の比較です。

<label>要素をコンテナにして選択可能にしています。これをクリックするか、キーボードでフォーカスを移動して表示されるアウトラインを確認してみましょう。

表示確認

CSS

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > label {
	display: block;
	margin: 1rem 0 0;
	padding: .5rem;
	background-color: #fff;
	cursor: pointer;
}
label > span {
	display: block;
}
label > input[type="text"] {
	width: 200px;
}
input[type="text"]:focus-visible {
	outline-color: rgb(83, 172, 221);
	outline-width: 5px;
}
#ta_1:focus-visible {
	outline-style: double;
}
#ta_2:focus-visible {
	outline-style: groove;
}
#ta_3:focus-visible {
	outline-style: inset;
}

HTML

<section class="samp_box">
	<label for="ta_1">
		<span>outline-style: double;</span>
		<input type="text" maxlength="16" id="ta_1">
	</label>
	<label for="ta_2">
		<span>outline-style: groove;</span>
		<input type="text" maxlength="16" id="ta_2">
	</label>
	<label for="ta_3">
		<span>outline-style: inset;</span>
		<input type="text" maxlength="16" id="ta_3">
	</label>
</section>