CSS2 » Properties » outline

Version: Level 2

Compability: Currently not supported by any browser.

outline : outline-color &| outline-style &| outline-width

The outline property is a shortcut that allows you to combine the outline-color, outline-style, and outline-width properties in one declaration. This property is not inherited.

Each of these three individual properties is discussed on its own page.
An outline is a line drawn around an element with the purpose of making that element stand out (i.e., become more noticeable on a page). The outline is drawn outside of the border edge of the element. Therefore, an element can have both a border and an outline. Unlike a border, an outline does not have to have a rectangular shape.
An interesting use of an outline is to have it display only when the element comes into focus or when the element is active. This is accomplished with the following code fragment by using the psuedo-elements :focus and :active.
p:focus { outline: blue solid thin }
p:active { outline: red solid thick }

Remember that each of these three properties is optional.


img { outline: red }
p { outline: double 5px }
button { outline: #E9E9E9 double thin }
Language(s): CSS2

See Also: