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