outline-style Redirect 1


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.


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" */ 


Specification Status Comment
CSS Basic User Interface Module Level 3 Working Draft No change.
CSS Level 2 (Revision 1) Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support  1.0 1.5 (1.8) [*] 8.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[*] In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension -moz-outline-style.

See also

Document Tags and Contributors

 Contributors to this page: Sheppy
 Last updated by: Sheppy,