outline-width

outline-widthは、アウトラインの太さを指定するスタイルです。

解説

アウトラインの太さを変更したい時に使用します。
太さは数値で指定する方法と、キーワードで指定する方法があります。

太さを指定する時は、outline-styleで何かしらスタイルを指定する必要があります。

構文

構文は以下になります。

値

outline-widthには以下の値が指定できます。

outline-widthの初期値は「medium」です。

サンプル

アウトラインにスタイルにsolid（通常線）、太さ3pxを指定する

.sample01 {
  outline-style:solid;
  outline-width:3px;
}

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

アウトラインにスタイルにdouble（二重線）、太さ5pxを指定する

.sample01 {
  outline-style:double;
  outline-width:5px;
}

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

アウトラインにスタイルにdashed（破線）、太さ5pxを指定する

.sample01 {
  outline-style:double;
  outline-width:5px;
}

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

備考

• アウトラインの見え方はブラウザによって異なります。
• スタイルの指定については、outline-styleページをご覧ください。

関連項目

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

Tweet