Much like the border property, the outline property will create a line surrounding the element— however, the main remarkable difference is that Outline unlike border does not take up screen real-estate (it doesn’t cause the ‘outlined element’ to get wider and taller as would adding a border property.

18.4 Dynamic outlines: the ‘outline’ property

At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS 2.1 outlines differ from borders in the following ways:

1. Outlines do not take up space.
2. Outlines may be non-rectangular.

The outline properties control the style of these dynamic outlines.

‘outline’
Value: [ < 'outline-color'> || < 'outline-style'> || < 'outline-width'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual, interactive
Computed value: see individual properties

‘outline-width’
Value: | inherit
Initial: medium
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual, interactive
Computed value: absolute length; ‘0’ if the outline style is ‘none’ or ‘hidden’

‘outline-style’
Value: | inherit
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual, interactive
Computed value: as specified

‘outline-color’
Value: | invert | inherit
Initial: invert
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual, interactive
Computed value: as specified

The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and doesn’t influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

The outline may be drawn starting just outside the border edge.

Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element’s boxes. In contrast to borders, the outline is not open at the line box’s end or start, but is always fully connected if possible.

The ‘outline-width’ property accepts the same values as ‘border-width’.

The ‘outline-style’ property accepts the same values as ‘border-style’, except that ‘hidden’ is not a legal outline style.

The ‘outline-color’ accepts all colors, as well as the keyword ‘invert’. ‘Invert’ is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.

Conformant UAs may ignore the ‘invert’ value on platforms that do not support color inversion of the pixels on the screen. If the UA does not support the ‘invert’ value then the initial value of the ‘outline-color’ property is the value of the ‘color’ property, similar to the initial value of the ‘border-top-color’ property.

The ‘outline’ property is a shorthand property, and sets all three of ‘outline-style’, ‘outline-width’, and ‘outline-color’.

Note. The outline is the same on all sides. In contrast to borders, there is no ‘outline-top’ or ‘outline-left’ property.

This specification does not define how multiple overlapping outlines are drawn, or how outlines are drawn for boxes that are partially obscured behind other elements.

Note. Since the outline does not affect formatting (i.e., no space is left for it in the box model), it may well overlap other elements on the page.

Example(s):

Here’s an example of drawing a thick outline around a BUTTON element:

button { outline-width : thick }

Scripts may be used to dynamically change the width of the outline, without provoking a reflow.

W3C – CSS 2.1 Specification (Working Draft)
Ch 18.4: User-Interface.Dynamic Outlines: the ‘outline’ property
URL: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines