CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS outline-width Attribute CSS3 outline-offset Attribute

CSS outline-Usage and examples of style attribute

outline-The style CSS property sets the style of the element's outline. However, in practice, we tend to useoutlineThis shorthand attribute.

The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts.

Default value:	none
Applies to:	All elements
Inheritance:	None
Animatable:	No.See also: Animation properties.
Version:	CSS 2,3
JavaScript syntax:	object.style.outlineStyle="dotted"

outline-Syntax of style usage

The syntax of this attribute is as follows:

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

The following examples demonstrate how to use outline-style attribute.

Example

　　p {
　　　outline-style: double;
　　　outline-width:　5px;
　　}

Test to see‹/›

Attribute Value

The following table describes the value of this attribute.

Value	Description
none	No outline is displayed. This is the default value.
dotted	Display the outline as a series of dots.
dashed	Display the outline as a series of short line segments, that is, dashes.
solid	Display the outline as a single solid line.
double	Display the outline as two parallel solid lines, leaving a certain interval between them. The sum of the two lines and the interval between them is equal tooutline-widthvalue.
groove	Display the outline carved into the canvas. It gives a3The D impression, usually achieved by creating two-color shadows, which areoutline-colorThe color is slightly lighter and darker.
ridge	Display an outline with the opposite effect of groove. It also gives a3The D impression, the outline looks as if it comes out of the canvas.
inset	Display makes the element box look like embedded in the canvas. It gives a3The D impression, usually achieved by creating two-color shadows, which areoutline-colorThe color is slightly lighter and darker.
outset	Display an outline with the opposite effect of inset. It also gives a3The D impression, the outline makes the box look as if it comes out of the canvas.
initial	Set this property to its default value.
inherit	If specified, the associated elements adopt the outline of their parent element-The value of the style attribute.

Browser Compatibility

outline-The compatibility of the style attribute browsers, the numbers in the following table indicate the minimum version number of the browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 1.5Above Google Chrome1+ Internet Explorer 8+ Apple Safari 1.2+ Opera 7+

Warning: Internet Explorer 7and earlier versions do not support this outline-style Attribute. IE8Supports this attribute, but requires a<!DOCTYPE>.