Code: Outline shorthand property

From Chapter 7: CSS Optimization

The outline property sets the outline-color, outline-style, and outline-width in one shorthand notation. Outlines differ from borders in that they take up no space, and they can be nonrectangular. The syntax of the outline property is as follows:

outline: <outline-color> <outline-style> <outline-width> inherit

The outline style and width accept the same values as their border counterparts. The outline-color property accepts all color values and also invert. invert performs a color inversion of the pixels on the screen to ensure visibility of the outline. An outline is the same width on all sides, unlike a border property.

For example:

button { outline: thick solid; }

This rule draws a thick solid outline around all buttons to highlight them. You can show which element has focus by using the outline property. Because they overlay the element and do not take up additional space, turning outlines on and off should not cause your web pages to reflow.

For example, you can use the focus and active pseudoclasses to set outlines according to the state of a button:

button:focus { outline: thick solid black; }
button:active { outline: thick solid red; }

These CSS rules draw a thick black line around a button when it has focus, and a thick red line around a button when it is active. Note that Internet Explorer 5 through 7 do not support the outline property, but Internet Explorer 8b1 does. For more information, visit http://www.w3.org/TR/css3-ui/#outline1 and http://www.w3.org/TR/CSS21/ui.html#outline-focus.