outline-width

Updated 2013.11.11 / Published 2007.02.02

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

値

<長さ>
thin
medium
thick
inherit

初期値

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  ; }