CSS outline property

Definition and Usage

The outline (outline) is a line drawn around the element, located outside the border edge, which can highlight the element.

Note:The outline line does not take up space and does not have to be rectangular.

The outline shorthand property sets all outline properties in one declaration.

The following properties can be set in order:

If one of the values is not set, it will not cause any problem, for example, outline:solid #ff0000; is also allowed.

See also:

CSS Tutorial:CSS Outline

HTML DOM Reference Manual:outline property

Example

Set the style of 4 borders:

p
  {
  outline:#00FF00 dotted thick;
  }

Try It Yourself

CSS Syntax

outline: outline-width outline-style outline-color|initial|inherit;

Property Value

Value Description
outline-color Specifies the color of the border. See also:outline-color Possible values.
outline-style Specifies the style of the border. See also:outline-style Possible values.
outline-width Specifies the width of the border. See also:outline-width Possible values.
inherit Specifies that the outline property should inherit the settings from the parent element.

Technical Details

Default Value: invert none medium
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.outline="#0000FF dotted thin"

TIY Example

Draw a line around the element
This example demonstrates how to draw a line around an element using the outline property.

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.