CSS Reference Property

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.
    ragged-outline
    The outline applied by Internet Explorer 8 on a <span> with 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.

    non-rectangular-outline
    The result of applying an outline to an inline piece of text broken across two lines in Firefox and Chrome.

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:

outline-inconsistencies
Browser inconsistencies in rendering an outline around an inline piece of text with different font sizes used.

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:

outline-inconsistencies-2
Browser inconsistencies in rendering an outline around an element with overflowing positioned content.

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:

[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.

Official Syntax

  • Syntax:

    outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit  
  • Initial: invert none medium; which is the concatenation of the initial values of the individual values
  • Applies To: all elements
  • Animatable: the outline-width is animatable as a length and outline-color is animatable as a color. The outline-style is not animatable.

Values

<‘outline-color’>
See outline-color entry for values.
<‘outline-style’>
See outline-style for values.
<‘outline-width’>
See outline-width for values.
inherit
The element inherits its outline value from its parent.

Examples

The following adds a purple outline to input fields when they are focused/tabbed.

input[type="text"]:focus {
    outline: 2px solid purple;
}
                

The above example could have been written as the following:

input[type="text"]:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: purple;
}
                

However, setting the outline of an element using the outline shorthand is usually more convenient.

Live Demo

The result of applying outlines to the different elements may differ depending on the browser you’re viewing the demo in.

View this demo on the Codrops Playground

Browser Support

The outline property is supported in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is supported starting from version 8.

Written by

Last updated February 4, 2015 at 3:55 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.