outline
The outline CSS shorthand property sets most of the outline properties in a single declaration.
Try it
Constituent properties

This property is a shorthand for the following CSS properties:  outline-color outline-style outline-width 
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: revert-layer;
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. As with all shorthand properties, any omitted sub-values will be set to their initial value.  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 invert for browsers supporting it, currentcolor for the others. 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

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way. There are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the outline property, the distance from the border using the outline-offset property, and corner angles using the border-radius property. An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.
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.  How to Design Useful and Usable Focus Indicators WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
 
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 =   <'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
CSS Basic User Interface Module Level 4 # outline

Browser compatibility




Desktop
Mobile



Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet




outline

1
Before Chrome 94, outline does not follow the shape of border-radius.


12
Before Edge 94, outline does not follow the shape of border-radius.


1.5
Before Firefox 88, outline does not follow the shape of border-radius.
1-3.6

8

7
Before Opera 80, outline does not follow the shape of border-radius.


1.2

outline does not follow the shape of border-radius. See bug 231433.


1
Before Chrome 94, outline does not follow the shape of border-radius.


18
Before Chrome 94, outline does not follow the shape of border-radius.


4
Before Firefox 88, outline does not follow the shape of border-radius.

10.1

1

outline does not follow the shape of border-radius. See bug 231433.

1.0


invert
No
12-79
1-3
8
7-15
No
No
No
No
No
No
No



See also
 outline-color outline-style outline-width 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: May 5, 2022, by MDN contributors


    
{'path': 'public/docs/css/outline.html', 'source': 'DevDocs.IO'}