Updated / Published

outline-widthプロパティは輪郭線(アウトライン)の幅(太さ)を指定します。

初期値
medium
適用対象
すべての要素
継承
しない
メディア
  • visual
  • interactive

outline-widthプロパティの値

outline-widthプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
thin
細め
medium
標準
thick
太め

これらのキーワードが対応する数値の解釈は、UA の設定に依存します。ただし、"thin" < "medium" < "thick" の関係は保たれることでしょう。

なお、outline-widthプロパティの指定を省略した場合は、自動的に "medium" が初期値として適用されますが、輪郭線の種類の指定がない場合、UA の輪郭線の種類は初期値が "none" に設定されている(輪郭線の種類が "none" だと、輪郭線の幅は強制的に0になる)ため、輪郭線を描写させるには outline-styleプロパティなりでその値を変える必要があります。輪郭線についての詳細は、outlineプロパティを参照ください。

outline-widthプロパティの実装状況

IE
◯:IE8よりサポート、IE6, 7は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

input:focus   { outline : orange solid  ; }
.thin:focus   { outline-width : thin   ; }
.medium:focus { outline-width : medium ; }
.thick:focus  { outline-width : thick  ; }