HTML and CSS Reference
In-Depth Information
In the case where there are two colors, this can change the outline in various locations.
The following example changes the outline in one case to black given a white background
and changes it to blue given an orange background:
Examples
p:hover {outline-style: dashed; outline-color: green; outline-width: 1px;}
.test {outline-width: 10px; outline-style: solid; outline-color: #f00;}
.xray {outline-color: invert;}
Compatibility
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 7+, Safari 1.2+
Notes
• Many browsers do not support the
invert
value the same and may invert based
upon one color in the case of multiple colors found in different areas of an element's
background.
• Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value
using a proprietary property
-moz-outline-color
.
outline-style
This property defines a style for an element's outline.
Syntax
outline-style: dashed | dotted | double | groove | inset | none | outset |
ridge | solid | inherit
The values supported should be the same as what is defined for
border-style
except the
value
hidden
which is not defined for this property.
Examples
p:hover {outline-style: dashed;}
.test {outline-width: 10px; outline-style: solid; outline-color: black;}
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-style
.
