outline (CSS property)

Description

The shorthand property outline sets the outline-color, outline-style, and outline-width around an element using the values specified.

An outline is similar to a border in that a line is drawn around the element; unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.

Outlines do not take up space in the flow of the document (and will not cause overflow), which may cause them to overlap other elements on the page. The fact that outlines don’t have any impact on surrounding elements (apart from overlapping) can be very useful in the debugging of layouts. We can apply an outline to all elements within a problematic section to see exactly what’s going on, and where the elements are placed. Unlike borders, adding outlines won’t disturb the flow of the document at all.

Outlines are usually drawn just outside the border edge of an element, although again the exact position isn’t defined, and can vary between user agents. An outline placed around inline elements such as text will closely hug the edges of that text, even where the text flows over several lines and may result in a non-rectangular, jagged box. This behavior represents a significant difference from the border property, which has only a rectangular shape.

Outlines allow authors to apply visual cues to elements to make them stand out when they take focus. Some user agents apply an outline to web page link elements when they have focus—such as when the user’s tabbing through a list of links. Changing an outline’s appearance on focus won’t cause the document to reflow.

Value

Refer to the outline-width, outline-style, and outline-color properties for information on their allowed values.

As with most shorthand properties, all the properties listed need not be specified, but any omitted properties will revert to their default values. In the case of outline-style, omitting a value will cause no outline to show at all (unless it’s redefined subsequently) because the default value for outline-style is none.

Compatibility

Internet Explorer for Windows (up to and including version 7) and Firefox 1.0 provide no support for outline.

Internet Explorer for Windows version 8 mis-positions the outline on inline elements when the parent element has the property/value text-align justify. The outline remains at the exact position had the value justify not been used and will therefore be misaligned with the element it refers to depending on how far the text has been moved when justified.

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.