outline-style (CSS property)
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;
}
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
groovein 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
insetin 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
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | None |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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.

