CSS outline-style Property

Definition and Usage

The 'outline-style' property is used to set the style of the entire outline of an element. The style cannot be 'none', otherwise the outline will not appear.

Outline (轮廓) is a line drawn around an element, located outside the border edge, which can highlight the element. The outline property sets the outline line around the element.

Note:Always declare the outline-style property before the outline-color property. The element must have an outline before its color can be changed.

Note:Outline lines do not take up space and may not necessarily be rectangular.

See Also:

CSS Tutorial:CSS Outline

CSS Reference Manual:outline Property

HTML DOM Reference Manual:outlineStyle Property

Example

Set the outline style:

p
  {
  outline-style:dotted;
  }

Try It Yourself

CSS Syntax

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

Property Value

Value Description
none Default. Defines no outline.
hidden Define hidden outline.
dotted Define dot outline.
dashed Define dashed line outline.
solid Define solid line outline.
double Define double line outline. The width of the double line is equal to the outline-width value.
groove Define 3D sunken groove outline. This effect depends on the outline-color value.
ridge Define 3D groove outline. This effect depends on the outline-color value.
inset Define 3D sunken outline. This effect depends on the outline-color value.
outset Define 3D bevel outline. This effect depends on the outline-color value.
inherit It is specified that the outline style settings should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.outlineStyle="dotted"

Try It Yourself

Set the outline style
This example demonstrates how to set the outline style.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Note:If !DOCTYPE is specified, IE8 supports the outline property.