Property Description

The outline property sets all the outline properties in one declaration. The properties that can be set, are (in order): outline-color, outline-style, outline-width.

This property has the following syntax:

outline: color style width|initial|inherit;

Note: If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

Property Values

Value	Description
color	Specifies the color of the outline (default = invert). See outline-color for possible values
style	Specifies the style of the outline (default = none). See outline-style for possible values
width	Specifies the width of the outline (default = medium). See outline-width for possible values
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

p {
  outline: #0000FF dashed thin;
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.5	8.0	1.2	7.0

Miscellaneous Information

Inherited:	No
Defined In:	CSS2
Default Value:	invert none medium

Property Description

The outline-color property specifies the color of an outline.

This property has the following syntax:

outline-color: color|invert|initial|inherit;

Note: Always declare the outline-style property before the outline-color property. An element must have and outline before the outline color can be changed.

Property Values

Value	Description
color	Specifies the outline color. Refer to the Colors section for the different ways to specify a color
invert	(default) Performs a color inversion. This ensures that the outline is visible, regardless of color background.
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

p {
  outline-style: dotted;
  outline-color:#0000ff;
}

<p>This is a paragraph</p>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.5	8.0	1.2	7.0

Miscellaneous Information

Inherited:	No
Defined In:	CSS2
Default Value:	invert

Property Description

The outline-offset property specifies the offset of an outline, drawing it behond the border edge.

This property has the following syntax:

outline-offset: length|initial|inherit;

Property Values

Value	Description
length|	Specifies the distance the outline is outset from the border edge (default = 0)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example sets the outline offset to 5 pixels:

p {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  outline: 2px solid red;
  outline-offset: 5px;
}

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
4.0	3.5		3.1	10.5

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	0

Property Description

The outline-style property sets the style of an outline.

This property has the following syntax:

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

Property Values

Value	Description
none	(default) Specifies no outline
dotted	Specifies a dotted outline
dashed	Specifies a dashed outline
solid	Specifies a solid outline
double	Specifies a double outliner
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value
inset	Specifies a 3D inset outline. The effect depends on the outline-color value
outset	Specifies a 3D outset outline. The effect depends on the outline-color value
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example sets the outline style to dotted for all paragraph elements.

p {
  outline-style: dotted;
}

This example shows the results of setting the various outline-style values:

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.5	8.0	1.2	7.0

Miscellaneous Information

Inherited:	No
Defined In:	CSS2
Default Value:	none

Property Description

The outline-width sets the width of an outline.

This property has the following syntax:

outline-width: thin|medium|thick|length|initial|inherit;

Note: Always declare the outline-style property before the outline-width property. An element must have and outline before the outline width can be changed.

Property Values

Value	Description
thin	Specifies a thin outline
medium	(default) Specifies a medium outline
thick	Specifies a thick outline
length	Sets the thickness of the outline
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example sets the outline style to dashed and the width to 5 pixels for all paragraph elements.

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

This example shows the results of setting the various outline-width values:

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.5	8.0	1.2	7.0

Miscellaneous Information

Inherited:	No
Defined In:	CSS2
Default Value:	medium