outline-style (CSS property)

Description

The outline-style property sets the style of the outline that’s drawn around an element. See outline for more information about outlines.

Note that an outline will only show when outline-style has been set with a value other than none.

Value

The property takes the same values as border-style with the exception of hidden, which is not allowed:

none

means no outline will show

dotted

implements the outline as a series of dots

dashed

implements the outline as a series of dashes

solid

implements the outline as a solid line

double

implements the outline as two solid lines (the sum of the two outline widths and the space between them equals the value that has been set for outline-width)

groove

a 3D effect that gives the impression that the outline is carved into the canvas

ridge

a 3D effect that has the opposite effect of groove in that the outline appears to protrude from the canvas

inset

a 3D effect that gives the impression that the outline is embedded into the canvas

outset

a 3D effect that has the opposite effect of inset in that the outline gives the impression of protruding from the canvas

In CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

Compatibility

Internet Explorer for Windows (up to and including version 7) and Firefox 1.0 provide no support for outline.

Internet Explorer for Windows version 8 mis-positions the outline on inline elements when the parent element has the property/value text-align justify. The outline remains at the exact position had the value justify not been used and will therefore be misaligned with the element it refers to depending on how far the text has been moved when justified.

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.