HTML and CSS Reference
In-Depth Information
Examples
p:hover {outline: dashed 1px;}
.test {outline: green solid 10px;}
Compatibility
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 7+, Safari 1.2+
Notes
• Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value
using a proprietary property
-moz-outline
.
• The
outline
is the same on all sides. Unlike borders, there is no sense of
outline-
top
or
outline-left.
This apparent omission should make perfect sense when
considering nonrectangular outlines.
• There is unclarity in the specification and implementation on what to do with
overlapping outlines, outlines around empty items, and outlines that may surround
partially obscured elements. Be aware in such cases of unclarity that visual
differences may occur. For example, notice here that one browser created two
separated outline boxes, given it surrounds empty elements, whereas in the
previous illustration the empty elements were outlined:
outline-color
This property sets the color of an element's outline.
Syntax
outline-color:
color
| invert | inherit
where
color
is a supported CSS color value, as discussed earlier in the chapter. The keyword
invert
is also supported and should perform a color inversion on the pixels on the
screen. In other words, any background would be inverted for the outline:
