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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support  1.0 1.5 (1.8) 8.0 7.0 1.2 (125)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA

Relative articles