CSS outline Property

Set an outline around a <h2> element and a <div> element:

h2 {
outline: 5px dotted green;
}div.a {
outline: 2px dashed blue;
}

Try it Yourself »


Definition and Usage

An outline is a line that is drawn around elements, outside the borders, to make the element “stand out”.

The outline property is a shorthand property for setting the following individual outline properties:

  • outline-width
  • outline-style (required)
  • outline-color

The outline property is specified as one, two, or three values from the list above.

Note: The outline is not a part of the element’s dimensions, therefore the element’s width and height properties do not contain the width of the outline.

Default value: medium invert none
Inherited: no
Animatable: yes, see individual propertiesRead about animatable – Try it
Version: CSS2
JavaScript syntax: object.style.outline=”#0000FF dotted 5px”Try it
CSS Syntax
outline: outline-width outline-style outline-color|initial|inherit;
Property Values
Value Description
outline-width Specifies the width of outline
outline-style Specifies the style of the outline
outline-color Specifies the color of the outline
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit