Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

outline-style (CSS property)

Browser support full matrix
IE7 FF1.5+ Saf1.3+ Op9.2+
None Full Full Full
Spec
Inherited Initial Version
No none CSS2, 2.1

Example

This style rule assigns a solid outline (with the default width and color) on focus to anchor elements within the element with ID "example":

#example a:focus {
  outline-style: solid;
}

Try it yourself!View all demos

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

IE5.5None
6.0None
7.0None
Firefox1.0None
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

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

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters