outline-style

Updated / Published

outline-styleプロパティは輪郭線（アウトライン）の種類（スタイル）を指定します。

値
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit
初期値
none
適用対象
すべての要素
継承
しない
メディア
  • visual
  • interactive

outline-styleプロパティの値

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

none
輪郭線なし（輪郭線の幅の値は強制的に0になる）
dotted
輪郭線は点線（丸い点線）になる
dashed
輪郭線は破線（四角い点線）になる
solid
輪郭線は実線になる
double
輪郭線は二重の実線になる
groove
輪郭線を窪んでいる様に見せる
ridge
輪郭線を隆起している様に見せる
inset
輪郭線の内側全体が窪んでいる様に見せる
outset
輪郭線の内側全体が隆起している様に見せる

原則、border-styleプロパティと同じですが、"hidden" が除かれます。輪郭線についての詳細は、outlineプロパティを参照ください。

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

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

サンプル

input:focus   { outline : orange thick ; }
.dotted:focus { outline-style : dotted ; }
.dashed:focus { outline-style : dashed ; }
.solid:focus  { outline-style : solid  ; }
.double:focus { outline-style : dotted ; }
.groove:focus { outline-style : dashed ; }
.ridge:focus  { outline-style : solid  ; }
.inset:focus  { outline-style : dotted ; }
.outset:focus { outline-style : dashed ; }