outline-style property CSS Reference

Definition and Usage

The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

It is often more convenient to use the shortcut property outline instead of outline-style, outline-width and outline-color.

  • Initial none
  • Applies to all elements
  • Inherited no
  • Media visual, interactive
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <br-style>
outline-style: none
outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset
outline-style: inherit


<br-style> can be any of the following:

No outline (outline-width is 0).
The outline is a series of dots.
The outline is a series of short line segments.
The outline is a single line.
The outline is two single lines. The outline-width is the sum of the two lines and the space between them.
The outline looks as though it were carved into the canvas.
The opposite of groove: the outline looks as though it were coming out of the canvas.
The outline makes the box look as though it were embeded in the canvas.
The opposite of inset: the outline makes the box look as though it were coming out of the canvas.


.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support 1.01.5 (1.8) (125)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNANANANANA

Relative articles