outline

Summary

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Outlines differ from borders in the following ways:

• Outlines do not take up space, they are drawn above the content.
• Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. Internet Explorer attempts to place the smallest contiguous outline around all elements or shapes that are indicated to have an outline. Opera draws a non-rectangular shape around a construct.

Overview table

Initial value

see individual properties

Applies to

All elements

Inherited

No

Media

visual

Computed value

see individual properties

Animatable

Yes

CSS Object Model Property

outline

Percentages

N/A

Syntax

• outline: inherit
• outline: outline-color outline-style outline-width

Values

outline-color outline-style outline-width

The outline property can contain up to three components:

• outline-color: This can take any valid CSS color as its value.
• outline-style: This takes any of the range of style values available to the outline-style property, which includes none, dotted, dashed, solid, double, groove, ridge, inset, outset. For more details about each, see the outline-style page.
• outline-width: This takes a numeric value with any of the standard length units.

inherit

This is a keyword indicating that the value is inherited from their parent’s element calculated value.

Examples

A simple example showing multiple divs, identical in style except that they have different outline properties applied to them.

<div class="one">I &hearts; WebPlatform.org!</div>
<div class="two">I &hearts; WebPlatform.org!</div>
<div class="three">I &hearts; WebPlatform.org!</div>
<div class="four">I &hearts; WebPlatform.org!</div>
<div class="five">I &hearts; WebPlatform.org!</div>

View live example

.one {
    /* The most basic border example you can show. */
    outline: 1px solid #000;
}

.two {
    /* If you don't explicitly set a color, currentColor is used, which
     equates to the text colour of the element, in this case black.   */
    outline: 4px dashed;
}

.three {
    /* When no width is specified, the default width medium is used */
    outline: dotted #f00;
}

.four {
    /* When no outline style is specified, the outline won't appear,
     as the default outline style is none. */
    outline: 5px #f00;
}

.five {
    /* A more interesting outline example to round things off. */
    outline: 10px inset #0f0;
}

View live example

Even though the syntax of outline and border is similar they differ in the way they are drawn.

/* Outlines do not take up space, they are drawn above the content */
.outline { outline: 10px solid #f00; }

/* Borders do */
.border { border: 10px solid #f00; }

View live example

An example of how outline and border behave when applied to an inline element spanning multiple lines.

<p>Web Platform Docs is a community-driven site that aims to become <span class="outline">a comprehensive and authoritative source for web developer documentation.</span></p>
<p>Web Platform Docs is a community-driven site that aims to become <span class="border">a comprehensive and authoritative source for web developer documentation.</span></p>
<p>Web Platform Docs is a community-driven site that aims to become <span class="outline border">a comprehensive and authoritative source for web developer documentation.</span></p>

View live example

/**
 * Outline vs Border on multiline text
 */

.outline {
    /* The outline is drawn all around the spanning element. */
    outline: 2px solid #f06;
}

.border {
    /* The border does not close at the edge of the element
     behaving as if it was a box. */
    border: 2px solid #00f;
}

/* The third paragraph has both outline and border */

View live example

Browsers place an outline around the element that currently has focus.

<p>Press the TAB key to navigate through the links below and focus them.</p>
<a href="http://webplatform.org">I &#9829; WebPlatform.org!</p>
<a class="two" href="http://webplatform.org">I &hearts; WebPlatform.org!</p>

View live example

/**
 * Outline, links and focus status
 */

/* Browsers place an outline around the element that currently has focus */

a {
    color: #f06;
    font: italic 200% Georgia, serif;
    text-decoration: none;
}

.two:focus {
    /* A different outline on focus for the second link */
    outline: 5px dotted #C67606;
}

a:active,
a:hover {
    /* Improve readability when focused
    and also mouse hovered in all browsers. */
    outline: 0;
}

View live example

Notes

Displaying an outline does not cause reflow, no matter how wide the outline is. The outline frame is drawn over an element, and does not influence the position or size of the box, or of any other boxes.

Related specifications

CSS Basic User Interface Module Level 3 (CSS3 UI)

Working Draft

Attributions

• Mozilla Developer Network .

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]