outline

< css‎ | properties
Jump to: navigation, search

outline

This article is Ready to Use.



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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.5
Yes
8.0
Yes
7.0
Yes
1.2
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
8.0
Yes
6.0
Yes
3.1
Yes


Examples

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

HTML

<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

CSS

.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 exampleEven though the syntax of outline and border is similar they differ in the way they are drawn.

CSS

/* 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 exampleAn example of how outline and border behave when applied to an inline element spanning multiple lines.

HTML

<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

CSS

/**
 * 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 exampleBrowsers place an outline around the element that currently has focus.

HTML

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

View live example

CSS

/**
 * 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;
}

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

Specification Status Related Changes
CSS Basic User Interface Module Level 3 (CSS3 UI) Working Draft

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]

Language: English  • svenska