W3cubDocs

/CSS

outline-width

The outline-width CSS 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 syntax

<line-width>

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

Examples

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;
}

Specifications

Initial value medium
Applies to all elements
Inherited no
Media as each of the properties of the shorthand:
Computed value an absolute length; if the keyword none is specified, the computed value is 0
Animation type a length
Canonical order the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1.5
1.5
1 — 3.6
Prefixed
Prefixed Requires the vendor prefix: -moz-
8 7 1.2
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? Yes ? ? ? ?

© 2005–2018 Mozilla Developer Network 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