This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

outline-width

Summary

The outline-width property sets the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Overview table

Initial value
medium
Applies to
All elements
Inherited
No
Media
visual
Computed value
absolute length; ‘0’ if the outline style is ‘none’.
Animatable
Yes
CSS Object Model Property
outlineWidth
Percentages
N/A

Syntax

  • outline-width: <width>

  • outline-width: inherit

  • outline-width: medium

  • outline-width: thick

  • outline-width: thin


Values

medium
Default.


thin
Less than the default width.


thick
Greater than the default width.


<width>
Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.


inherit
This is a keyword indicating that the value is inherited from their parent's element calculated value.


Examples

A simple example showing multiple <span>s. 

<div class="all">
    <p>
      <span class="medium">Medium</span>
    </p>
    <p>
      <span class="thin">Thin</span>
    </p>
    <p>
      <span class="thick">Thick</span>
    </p>
    <p>
      <span class="width">10px</span>
    </p>
</div>

View live example

CSS outline width values. 

.all {
  background-color: lightgrey;
}

.all p {

padding: 20px;

}


.all span {

padding: 10px;

margin: 10px 10px 10px 10px;

font-size: 36px;

font-family: Bitter;

outline-style: solid;

}


.all .medium {

outline-width: medium;

}


.all .thin {

outline-width: thin;

}


.all .thick {

outline-width: thick;

}


.all .width {

outline-width: 10px;

}

View live example

Notes

  • Displaying an outline does not cause reflow, no matter how wide the outline is. The outline frame is drawn over an element, and does not influence the position or size of the box, or of any other boxes.
  • The outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.


Related specifications

CSS Basic User Interface Module Level 3 (CSS3 UI)
Working Draft

Attributions