CSS Outline Styles

The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:

• Outlines do not take up space.
• Outlines may be non-rectangular.

Outlines Do Not Take Up Space

This statement, in and of itself is confusing. How can an object on your Web page not take up space on the Web page? But if you think of your Web page as being like an onion, each item on the page may be layered on top of another item. The outline property doesn't take up space because it always is placed on top of the box of the element.

Read More

Design Definition of CSS Property

By Jennifer Kyrnin

When an outline is placed around an element, it doesn't have any effect on how that element is laid out on the page. It doesn't change the element's size or position. If you put an outline on an element, it will take up the same amount of space as if you didn't have an outline ​of that element. This is not true of a border. A border on an element is added to the outside width and height of the element. So if you had an image that was 50 pixels wide, with a 2-pixel border, it would take up 54 pixels (2 pixels for each side border). That same image with a 2-pixel outline would take up only 50 pixels width on your page, the outline would display over the outside edge of the image.

Outlines May Be Non-Rectangular

Before you start thinking "cool, now I can draw circles," think again. This statement has a different meaning than you might think. When you put a border on an element, the browser interprets the element as if it were one giant rectangular box. If the box gets split over several lines, the browser just leaves the edges open because the box isn't closed. It's as if the browser is seeing the border with an infinitely widescreen — wide enough for that border to be one continuous rectangle.

In contrast, the outline property takes edges into consideration. If an outlined element spans several lines, the outline closes at the end of the line and reopens again on the next line. If possible, the outline will stay fully connected as well, creating a non-rectangular shape.

Uses of the Outline Property

One of the best uses of the outline property is to highlight search terms. Many sites do this with a background color, but you can also use the outline property and not worry about adding any extra spacing on your pages.

The outline-color property accepts the term "invert" which makes the outline color the inverse of the current background. This allows you to highlight elements on dynamic Web pages without needing to know what colors are used.

You can also use the outline property to remove the dotted line around active links. This article from CSS-Tricks shows how to remove the dotted outline.