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.