Web/CSS/outline

The outline CSS shorthand property set all the outline properties in a single declaration.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

The outline property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The outline will be invisible for many elements if its style is not defined. This is because the style defaults to none. A notable exception is input elements, which are given default styling by browsers.

Values

<'outline-color'>: Sets the color of the outline. Defaults to currentcolor if absent. See outline-color.
<'outline-style'>: Sets the style of the outline. Defaults to none if absent. See outline-style.
<'outline-width'>: Sets the thickness of the outline. Defaults to medium if absent. See outline-width.

Description

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.

As with all shorthand properties, any omitted sub-values will be set to their initial value.

Accessibility concerns

Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

Formal definition

Initial value	as each of the properties of the shorthand: `outline-color`: `invert`, for browsers supporting it, `currentColor` for the other `outline-style`: `none` `outline-width`: `medium`
Applies to	all elements
Inherited	no
Computed value	as each of the properties of the shorthand: `outline-color`: For the keyword `invert`, the computed value is `invert`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0` `outline-style`: as specified
Animation type	as each of the properties of the shorthand: `outline-color`: a color `outline-width`: a length `outline-style`: discrete

Formal syntax

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

Examples

Using outline to set a focus style

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Result

Specifications

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'outline' in that specification.	Recommendation	No change.
CSS Level 2 (Revision 1)The definition of 'outline' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`outline`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1.5 Notes' Full support 1.5 Notes' Notes' Firefox includes absolutely positioned elements inside the outline (see bug 687311). No support 1 — 3.6 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE Full support 8	Opera Full support 7	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.': See implementation notes.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

outline by Mozilla Contributors is licensed under CC-BY-SA 2.5.