Outline Borders | Cascading Style Sheets: Designing for the Web (3rd Edition)

Name:	outline
Value:	<outline-width> \| \| <outline-style> \| \| <outline-color>
Initial:	see the individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	outline-color
Value:	<color> \| invert
Initial:	invert
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	outline-style
Value:	<border-style>
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	outline-width
Value:	<border-width>
Initial:	medium
Applies to:	all elements
Inherited:	no
Percentages:	N/A

CSS has another kind of border, called an outline, which is like a normal border but doesn't take up any space. It is drawn around an element and may overlap the elements around it. Typically, this type of border is used for dynamic effects borders that appear only for a short time; for example, while a new page is being fetched or while the mouse hovers over an element. For situations like that, it doesn't matter that the border overlaps something else, and you don't want to reserve any space for it anyway because, most of the time, there is no border.

Here is an example of an outline border added to a hyperlink while the mouse hovers over the link:

 <STYLE TYPE="text/css">   A:hover { outline: thick red } </STYLE> <BODY>   <P>Here is a text with     a <A HREF="other">link</A> in it. </BODY>

You cannot set the four sides of the outline border to different styles, as with normal borders, but you can set the color, width, and style of the entire outline separately.