W3cubDocs

/CSS

outline-width

The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

Syntax

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.1em;

/* Global values */
outline-width: inherit;

The outline-width property is specified as any one of the values listed below.

Values

<length>
The width of the outline specified as a <length>.
thin
Depends on the user agent. Typically equivalent to 1px in desktop browsers (including Firefox).
medium
Depends on the user agent. Typically equivalent to 3px in desktop browsers (including Firefox).
thick
Depends on the user agent. Typically equivalent to 5px in desktop browsers (including Firefox).

Formal definition

Initial value medium
Applies to all elements
Inherited no
Computed value an absolute length; if the keyword none is specified, the computed value is 0
Animation type a length

Formal syntax

<line-width>

where
<line-width> = <length> | thin | medium | thick

Examples

Setting an element's outline width

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
outline-width 1 12 1.5
1.5
1 — 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
8 7 1.2
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
outline-width 37 18 4 14 1 1.0

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width