Note: Here is another post originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.

Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an element outside of it’s border. By definition, it takes up no space. Sounds impossible, right? In reality, it does take up space (you can see it!) however, that space is not added to the width of the element like a border would be.

Most often, the outline is used to highlight an active link. By default this is a small dotted line that encapsulates the link. To be honest, as a designer I have often found the outline to be a bit ugly. There are some designers who hide the outline entirely (I used to be one of them). However, in Firefox, Internet Explorer and Chrome you can navigate the web using only the keyboard by tabbing through the links on each page. Each link is highlighted by an outline when you reach it. You can hit enter to follow the link. Hiding the outline entirely takes that feature away from users who prefer to use their keyboards. So to prevent the ugly outline while still retaining keyboard navigation we can style the outline using CSS.

This solution is not perfect, due to the lack of support by Internet Explorer (as of version 7). While Internet Explorer uses an outline to highlight links, it does not support styling it will CSS. Firefox, Safari, Opera and Chrome on the other hand, do allow you to specify your own styles.

The outline can be styled with the following properties:

• outline-color
• outline-style
• outline-width
• outline

Outline-color behaves like any other color declaration and also supports the value “invert” which performs a color inversion of the pixels on the screen. This is the default behavior and ensures that the outline will stand out from the background. Outline color can be set like this:

a{outline-color: white;}

Outline-style has the same possible values as the more common property border-style and is set like this:

a{outline-style: dashed;}

Outline-width can be set to thin, medium, thick, or can be specified with a length such as 3px.

a{outline-width: 1px;}

Finally, outline is a shorthand property for setting the previous three properties all at once. For example:

a{outline:2px solid red;}

Keep in mind an outline is the same on all sides. Unlike border, you cannot specify a style for only one side of an outline. To play around with the outline property, visit http://www.w3schools.com/CSS/tryit.asp?filename=trycss_outline

For even more information:

• Don’t remove the outline from links – arjaneising.nl
• Removing the dotted line – csstricks.com
• The outline CSS property – sitepoint.com