Setting an Element s Outline

Setting an Element's Outline

You may have noticed that I didn't mention the outline in the first section of this chapter when I detailed the parts of a box. This is because Internet Explorer doesn't support it. So although the outline is useful and will not interfere with Internet Explorer, you can't rely on using it to convey critical information to the viewer.

The outline (Table 6.8) surrounds the border and even uses the same values as the border, but unlike the border, it does not increase the apparent dimensions (width or height) of the box, and so does not actually take up any space on the screen. Instead, it will appear under any margin and out into the page under surrounding content.

Table 6.8. Outline Values
VALUE	COMPATIBILITY
<border-width>	IE5^[*], FF1.5, S1.3, O7, CSS2.1
<border-style>	IE5^[*], FF1.5, S1.3, O7, CSS2.1
<border-color>	IE5^[*], FF1.5, S1.3, O7, CSS2.1

^[*] Mac only, not available for Windows

An outline can be very useful for link-rollovers, allowing you to highlight them without displacing the surrounding content. Although outlines are not supported by Internet Explorer for Windows, they won't interfere with that browser if you decide to use them.

In this example (Figure 6.10), the links in the navigation have a red outline added when users hover their cursors over them. Unlike adding a border, this will not cause the surrounding links to shift around. In addition, outlines have been added to the form text field when it is in focus (or selected) and the form button when the user hovers over it. Although Internet Explorer does not support the outline property, it doesn't support the :focus pseudo-class at all or the :hover class for anything but links, so no harm done. Finally, I added a big outline around the drop box to show how the outline slides under surrounding content.

Figure 6.10. Unlike borders, outlines don't require additional space on the screen. Instead, they slide under surrounding elements in the background, making them very useful for highlighting pseudo-classes such as `:hover` and `:focus`.

To set a box's outline:

outline: 5px solid red;

The outline property looks identical to the border property: first width, then style, and then color separated by spaces (Code 6.7).

Code 6.7. The outline goes around the border, but will not change the size of the element.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CSS, DHTML &amp; Ajax | Setting an Elements Outline</title>         <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff;      margin: 8px; } h1, h2 {      color: #999;      margin: .5em 0em; } h2 {      clear: both; } img {      margin: 4px;      display: block; } form {      margin: 4px 0px; } input.formText {      border: 1px solid #666;      background-color: #999; } input.formButton {      border: 1px solid #999;      background-color: #ccc;      color: #333; } input.formText:focus {      outline: 5px solid red;      background-color: #fcc; } input.formButton:hover {      outline: 1px solid #f00;      background-color: #f00;      color: white; } #navigation {      margin-right: 8px;      border: 3px solid #666;      background-color: #ccc;      float: left;      font: small Arial, Helvetica, sans-serif; } #navigation a {      border-top: 3px solid #fff;      text-decoration: none;      display: block;      color: red; } #navigation a:hover {      outline: 3px solid #f00;      color: red;      background-color: #fff; } #copy p {      margin: 1em 5em; } .author {      margin-top: 0cm;      font: bold 1em Arial, Helvetica, sans-serif;      } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      outline-width: 50px;      outline-style: solid;      outline-color: #f00;      border: 5px solid black;      margin: 0px 0px 8px 8px;      float: right;      font: small Arial, Helvetica, sans-serif; } --></style>      </head>      <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" >       Search Book:       <input  type="text" name="searchTerm" size="24" />       <input  type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER III      <span >A Caucus-Race and a Long Tale</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice09a.gif" height="236" width="200" alt="Alice" /> Alice makes some new friends? </div> <p>They were indeed a queer-looking party that assembled on the bank--the birds with  draggled feathers, the animals with their fur clinging close to them, and all dripping wet , cross, and uncomfortable.</p> </div> </body> </html>

outline-width: 50px;outline-style: solid; outline-color: #f00;

Also like the border property, outline can have each of its values defined individually, which is useful when you need to override one of them for an element without having to change the others.

Tips

Mozilla browsers originally used the -moz-outline property, but that has now been replaced.
Unlike border, outline cannot be set independently for the sides.