CSS Reference Property

outline-width 1r5j2u

The outline-width property is used to set the width of an element’s outline. 3y56z

An outline is a line that is drawn outside the outline property entry for more information about outlines, how they differ from borders, and more.

The outline-width property is a longhand property that can be specified as part of the shorthand outline property. It is usually more convenient to set the outline of an element using the shorthand property.

Official Syntax 55184y

  • Syntax:

    outline-width: thin | medium | thick | <length> | inherit
  • Initial: medium
  • Applies To: all elements
  • Animatable: yes, as a length

Values 584j31

thin
A thin border.
medium
A medium border.
thick
A thick border.
<length>
See the <length> property entry for a list of possible length values.
inherit
The element inherits its outline width from its parent.

Notes z5jo

The interpretation of the first three values depends on the browser. The following relationships must hold, however:

thin <=medium <= thick.

Furthermore, these widths must be constant throughout a document.

Examples 3e5p5z

The following adds a 2px-width purple outline to input fields when they are focused/tabbed. The color and style of the outline are set using the outline-style properties.

input[type="text"]:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: purple;
}

Live Demo 2x4j2k

The following demo sets the outline width on boxes (<div>s) with a deepPink outline.

View this demo on the Codrops Playground

Browser k5t66

The outline-width property is ed in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is ed starting from version 8.

Written by

Last updated June 3, 2020 at 12:34 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.