outline

The outline property is used to draw an outline around an element.

An outline is a line that is drawn outside the borders of an element to make it stand out on the page. It is usually used for accessibility reasons ^[1], and can be used for decoration purposes ^[2].

An outline is similar to a border in that it is drawn around an element and can have the same kind of styles a border can have, but they differ in the following points:

• Outlines do not take up space. An outline is not part of an element’s box model, and so it does not contribute to or affect the element’s dimensions or boxes. This also means that adding or removing an outline on an element does not affect its position on the page or the position of other elements around it like a border could. Adding or removing outlines also does not cause reflow or overflow on an element.

  Also, since the outline does not have a role in box formatting, it may overlap other elements on the page when it is drawn.

• An outline is drawn all around the four sides of an element. You cannot specify the sides where you want to draw the outline on. This makes sense because, after all, it is an outline and is used to highlight/focus elements on the page.
• You cannot apply a rounded corner to an outline. You can round the corners of the element’s border using the border-radius property, but you cannot apply that property to the outline (it is called border-radius after all), and there is no equivalent outline-radius property, for example, to round the corners of an outline. ^[3]
• Outlines may be non-rectangular. Depending on the browser’s behavior, some elements may get outlines that are not rectangular. For example, older versions of Opera (most likely pre-WebKit) and Internet Explorer create a staggered outline around an inline element that has text with two different font sizes used.
  

  

  Also, if the element is broken across several lines, the outline is the minimum outline that encloses all the element’s boxes. Each part of the outline should be fully connected rather than open on some sides (as borders on inline elements are when lines are broken). The parts of the outline are not required to be rectangular. In contrast to borders, the outline is not open at the line box’s end or start, but should always be fully connected if possible.

  The following shows an outline drawn around an inline piece of text that is broken across two lines, and how it is rendered in Firefox (left) and Chrome (right). In Firefox, the outline is closed; while in Chrome, it is open.

  

The outline property is a shorthand property for the outline-width, outline-style, and outline-color properties.

The outline of an element is usually drawn right outside the border edge. You can, however, draw the outline farther from the border using the outline-offset property. The outline-offset property is not set as part of the outline shorthand; you’ll have to set it on its own.

As you have seen in the examples above, the result of applying outline to an element is inconsistent across browsers. Outlines of inline elements spanning across multiple lines may be either open or closed depending on the browser. Outlines of an inline piece of text with two different font sizes used is also rendered differently across browsers:

Furthermore, the result of applying an outline is even more inconsistent when the element that you’re applying an outline to has content that is positioned outside its boundaries:

Trivia & Notes

[1] The outline property is used to highlight or focus an element in the page. It is important to highlight tabbed elements so that users using the keyboard to move around the page know where exactly they are at. However, due to the inconsistencies in behavior among browsers in rendering the outline of an element, many developers prefer using borders and/or box shadows to outline elements on focus states.

The outline property is usually added to form elements such as buttons and input fields to focus them when they are active or being tabbed by the user.

[2] The outline property can be used to create multiple borders around an element. The border property does not allow the addition of multiple borders around an element. That is why developers use border and box shadow tricks to create multiple borders. The outline would work as a second border around the element’s initial border, and then any number of additional box shadows can be used to create extra “borders” around the element.

You can read more about creating multiple borders in these articles:

• Multiple Backgrounds and Borders with CSS 2.1
• Multiple Borders with CSS

[3] There exists a non-standard Firefox-only -moz-outline-radius property that allows you to give outlines rounded corners just like you would give borders. You can read more about this in this entry on the Mozilla Developer’s Network.