CSS outline-width property

Definition and usage

The outline-width property sets the width of the entire outline of the element, and this width will take effect only when the outline style is not none. If the style is none, the width will actually reset to 0. Negative length values are not allowed.

Outline (outline) is a line drawn around an element, located outside the edge of the border, 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-width 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:outlineWidth property

Example

Set the color of the dotted outline:

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

Try it yourself

CSS syntax

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

Attribute value

Value Description
thin Specifies a thin outline.
medium Default. Specifies a medium outline.
thick Specifies a thick outline.
length Allows you to specify the value of the outline thickness.
inherit Specifies that the outline width setting should be inherited from the parent element.

Technical details

Default value: medium
Inheritance: no
Version: CSS2
JavaScript syntax: object.style.outlineWidth="thin"

Try It Yourself

Setting the outline width
This example demonstrates how to set the outline width.

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.