<pre class="brush: css notranslate"><code><span class="token comment">/ style /</span> <span class="token property">outline</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token comment">/ color | style /</span> <span class="token property">outline</span><span class="token punctuation">:</span> #f66 dashed<span class="token punctuation">;</span> <span class="token comment">/ style | width /</span> <span class="token property">outline</span><span class="token punctuation">:</span> inset thick<span class="token punctuation">;</span> <span class="token comment">/ color | style | width /</span> <span class="token property">outline</span><span class="token punctuation">:</span> green solid 3px<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">outline</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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: revert; 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

Sets the color of the outline. Defaults to currentcolor if absent. See outline-color.

Sets the style of the outline. Defaults to none if absent. See outline-style.

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:

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

Formal syntax

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

Examples

Using outline to set a focus style

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

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

Specifications

See also