outline-style
outline-styleは、アウトラインのスタイルを指定します。
解説
アウトラインのスタイルを変更したい時に使用します。
スタイルは border-styleで使用するものと同じものが指定できます。
構文
構文は以下になります。
outline-style: 値;
値
outline-styleには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| none | 線を指定しない（デフォルト値） （例）border-style:none; |
| solid | １本線 （例）border-style:solid; |
| double | ２本線 （例）border-style:double; |
| dotted | 点線 （例）border-style:dotted; |
| dashed | 破線 （例）border-style:dashed; |
| ridge | 膨らんだ線 （例）border-style:ridge; |
| groove | 窪んだ線 （例）border-style:groove; |
| inset | 要素全体が窪んだスタイル （例）border-style:inset; |
| outset | 要素全体が膨らんだスタイル （例）border-style:outset; |
太字の値は初期値です。
サンプル
スタイルにdouble（二重線）を指定する
.sample01 {
outline-style:double;
}
<input type="text" class="sample01">
<input type="radio" class="sample01">
<input type="checkbox" class="sample01">
<textarea class="sample01"></textarea>
備考
- アウトラインの見え方はブラウザによって異なります。
関連項目
- outline：アウトラインの色、スタイル、太さをまとめて指定する
- outline-color：アウトラインの色を指定する
- outline-style：アウトラインのスタイルを指定する
- outline-width：アウトラインの太さを指定する
