CSS outline-width Property
Set the width of an outline:
More "Try it Yourself" examples below.
Definition and Usage
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
outline-width specifies the width of an outline.
Note: Always declare the outline-style property before the
outline-width property. An element must have an outline before you change the width of it.
|Animatable:||yes, see individual properties. Read about animatable Try it|
Tips and Notes
Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
The numbers in the table specify the first browser version that fully supports the property.
|medium||Specifies a medium outline. This is default||Demo ❯|
|thin||Specifies a thin outline||Demo ❯|
|thick||Specifies a thick outline||Demo ❯|
|length||Allows you to define the thickness of the outline. Read about length units||Demo ❯|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
Set the width of the outline to medium (this is default):
Set the width of the outline to thin:
Set the width of the outline to 1px:
Set the width of the outline to 15px:
CSS tutorial: CSS Outline
CSS reference: outline property
HTML DOM reference: outlineWidth property