outline:アウトラインの装飾を一括で指定する

初期値 各プロパティの初期値
適用対象 全ての要素
継承 しない
アニメーション <color>値、<length>値、離散値
対応ブラウザ caniuseで確認

outlineプロパティの説明

outlineは、要素の輪郭線として引かれるアウトラインの装飾を一括で指定します。本プロパティは、アウトラインの色、形状、太さをまとめて操作するショートハンド・プロパティです。

outlineを直訳すると輪郭線になりますが、境界線を表すborderとは明確な違いがあります。境界線は要素が作成するボックスの中で専有の面積を持ちますが、アウトラインは持ちません。主に、境界線は要素の装飾を担う実態なのに対して、アウトラインは要素の存在を表す概念という捉え方ができます。

例えば、キーボードの操作で要素のフォーカスを移動した祭に、アウトラインで現在位置を知らせます。そのアウトラインをもって、要素の影響範囲あるいは操作可能範囲を表すことになります。境界線であれば、あくまで視覚的に装飾された部分にしかなりませんが、アウトラインであれば可視化されないリンクのボックス範囲なども表すことが可能です。

アウトラインの装飾を個別に行う場合は、以下のプロパティを使用して下さい。要素の輪郭から切り離した位置にアウトラインを表示するにはoutline-offsetを、アウトラインの角を丸めるにはborder-radiusを使用します。

outlineに指定できる値

<'outline-color'>
アウトラインの色を設定します。省略した場合は既定値のcurrentcolorとなります。詳細は、outline-colorを参照してください。
<'outline-style'>
アウトラインの形状を設定します。省略した場合は既定値のnoneとなります。詳細は、outline-styleを参照してください。
<'outline-width'>
アウトラインの太さを設定します。省略した場合は既定値のmediumとなります。詳細は、outline-widthを参照してください。

outlineの使い方とサンプル

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

CSS
/* style */
outline: solid;
outline: dashed;
outline: dotted;

/* style | color */
outline: solid #000;
outline: dotted gray;
outline: dashed rgba(0, 0, 0, 0.5);

/* width | style */
outline: thick double;
outline: 10px inset;

/* width | style | color */
outline: 1px solid #333;
outline: thick double gray;

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

outlineの実例

それでは実際にoutlineプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾を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;
}
#ta_1:focus-visible {
	outline: solid;
}
#ta_2:focus-visible {
	outline: dashed #f90;
}
#ta_3:focus-visible {
	outline: 3px double #09f;
}
HTML
<section class="samp_box">
	<label for="ta_1">
		<span>outline: solid;</span>
		<input type="text" maxlength="16" id="ta_1">
	</label>
	<label for="ta_2">
		<span>outline: dashed #f90;</span>
		<input type="text" maxlength="16" id="ta_2">
	</label>
	<label for="ta_3">
		<span>outline: 3px double #09f;</span>
		<input type="text" maxlength="16" id="ta_3">
	</label>
</section>

outlineに関連するCSSプロパティ

境界線・輪郭線
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの装飾を一括で指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインと要素の空間を指定する
outline-style アウトラインの形状を指定する
outline-width アウトラインの太さを指定する