outline

outlineは、アウトラインのスタイルを一括して指定するスタイルです。

解説

アウトライン項目に関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下３つです。

• outline-style
• outline-color
• outline-width

値と値の間は半角スペースで区切って指定します。
値の順番に決まりはありません。
３つ全ての値を指定しなくてもOKですが、outline-styleの値だけは必須です。

構文

構文は以下になります。

値の順番はこの通りでなくとも構いません。

値

outlineに指定できる値は、下記それぞれのページをご覧ください。

• outline-style
• outline-color
• outline-width

サンプル

スタイルに「二重線、青、5px」を指定する

.sample01 {
  outline:double blue 5px;
}

<input type="text" class="sample01">
<input type="radio" class="sample01">
<input type="checkbox" class="sample01">
<textarea class="sample01"></textarea>

スタイルに「点線、赤、3px」を指定する

.sample02 {
  outline:dotted red 3px;
}

<input type="text" class="sample02">
<input type="radio" class="sample02">
<input type="checkbox" class="sample02">
<textarea class="sample02"></textarea>

スタイルに「破線、緑」を指定する

.sample03 {
  outline:dashed green;
}

<input type="text" class="sample03">
<input type="radio" class="sample03">
<input type="checkbox" class="sample03">
<textarea class="sample03"></textarea>

指定しない値（この場合太さ）はデフォルト値が適用されます。

備考

• outline-color値、outline-width値の指定は任意ですが、outline-styleの値だけは必須です。

関連項目

• outline：アウトラインの色、スタイル、太さをまとめて指定する
• outline-color：アウトラインの色を指定する
• outline-style：アウトラインのスタイルを指定する
• outline-width：アウトラインの太さを指定する

Tweet