The outline
CSS property is a shorthand to set various outline properties in a single declaration: outline-style
, outline-width
, and outline-color
.
As with all shorthand properties, any omitted sub-values will be set to their initial value.
Borders and outlines are very similar. However, outlines differ from borders in the following ways:
/* 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 if its style is not defined. This is because the style defaults to none
.
<'outline-color'>
currentcolor
if absent. See outline-color
.<'outline-style'>
none
if absent. See outline-style
.<'outline-width'>
medium
if absent. See outline-width
.[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
<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; }
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.
Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline' in that specification. | Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'outline' in that specification. | Recommendation | Initial definition. |
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | no |
Media | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1.5
|
8 | 7 | 1.2 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | ? | Yes | 4 | 7 | 3.1 | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline