Defines the properties for an outline drawn over the outer edge of an element. Outlines differ from borders in that borders are drawn to the outside of the element.
Browser/User Agent Support
| IE | Netscape | Mozilla | Opera | Safari | no | 6.0+ | no | 7.0+ | 1.2+ |
|---|---|---|---|---|
| ||||
Usage
[color] [style] [width]
Values
| inherit | Inherit the value from the parent element. |
| #ffffff | outline-color: Color placeholder. e.g. #ffffff = white |
| none | outline-style: No outline. |
| dotted | outline-style: Dotted line. |
| dashed | outline-style: Dashed line. |
| solid | outline-style: Solid line. |
| double | outline-style: Double line. |
| groove | outline-style: Grooved line. |
| ridge | outline-style: Ridged line. |
| inset | outline-style: Inset line. |
| outset | outline-style: Outset line. |
| hidden | outline-style: Hidden outline. |
| thin | outline-width: Thin outline. |
| medium | outline-width: Medium outline. |
| thick | outline-width: Thick outline. |
Example
To specify a thick, red, dashed outline, use the following syntax: .myoutlineclass {outline: thick red dashed;}.
For a demonstration of the outline attributes, see the demo page on quirksmode:
http://www.quirksmode.org/css/outline.html
Remarks
Use the outline property as a shortcut to typing out all of the individual outline properties separately. You can specify any valid value for a outline property as part of outline.
Availability
W3C CSS2