B.76. outline-width

Outlines are very similar to borders; however, they do not occupy any space in the CSS box model (i.e. turning off and on an element's outline or changing its outline width should not affect the position of that element, or any other elements on the page). Additionally, an outline should follow the actual shape of the element's content (e.g. hugging the jagged right edge of a left-aligned paragraph) rather than forming a rectangular box around it. The outline of an inline element that flows over several lines is closed at the starts and ends of lines, whereas the border is not.

The outline-width property sets the width of the outline drawn around the selected element(s).

Inherited: No

See also: Section B.19border-width

B.76.1. Value

thin, medium, thick, or any CSS length measurement.

Initial value: medium

B.76.2. Compatibility

CSS Version: 2

Only Internet Explorer 5 for Macintosh and Opera 7 browsers support this property, and they render only rectangular outlines as opposed to the content-hugging style prescribed by the CSS2 specification.

B.76.3. Example

This style rule adds a three pixel outline of style outset around hyperlinks when the user hovers the mouse over them:

a:hover {
  outline-style: outset;
  outline-color: grey;
  outline-width: 3px;
}