| Inherited | Initial | Version |
|---|---|---|
| No | invert |
CSS2,2.1 |
| IE8+ | FF1.5+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Buggy | Buggy | Full | Full | Full |
Syntax
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.
Example
This style rule assigns a
red outline color on focus to anchor elements within
the element with ID "example":
#example a:focus {
outline-color: red;
outline-style: solid;
}Value
outline-color
accepts any valid CSS color value, as well as the keyword
invert. invert does as its name
suggests: it performs a pixel-color inversion of the outline in order that
the outline remains visible regardless of any background colors that have
been set. As of CSS2.1, user agents have been allowed to ignore the
invert value, and instead use the element’s
color property.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| None | None | None | Buggy | None | Buggy | Buggy | Buggy | Buggy | Full | Full | Full | Full | Full | Full | Full | Full |
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.
