Outlines are lines drawn around elements outside the borders. These do not take up any space and thus never influence the position or size of the element boxes. These are usually used for better accessibility or for making design attractive.
The outline
property is a shorthand property which allows us to change the style, color and width of outlines by setting the values of the three outline properties- outline-style
, outline-width
and outline-color
in a single declaration.
CSS
outline: [outline-style] [outline-width] [outline-color];
There is no specific order in which the three values are given in the declaration.
Values
The possible values which can be given for the three longhand properties are given below.
outline-style
This property is used to set the style of the outline of an element. It can take any of the following values. Its default value is none
.
auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width
This is used to set the width of the outline of an element. It can take one of the following values. Its default value is medium
.
<length> | thin | medium | thick
outline-color
This property is used to set the color of the outline of an element. It can take any of the following values. Its default value is invert
.
<color> | invert
Apart from these, the outline
property can also take the following universal values.
initial
: Sets the initial value.
inherit
: Sets the value of the parent element.
Note that you must define the outline-style
property other than none
for giving the outline-width
and the outline-color
values. This is because there is no outline present by default. So in order to give an outline width or color, you must first define an outline using the outline-style
property.
Example
If one of the three values is not given in the declaration, then the default value of the corresponding property is given to the outline by the browser. This will become clear from the following example.
See the Pen outline property examples by Aakhya Singh (@aakhya) on CodePen.
The first div is given an outline of width 8px, color orange and type dotted. The outline of the second div is also of color orange and type dotted. Since the outline
property of the second div is not given any outline width value, it takes the default value medium
.
Difference between outline and border
Border and outline together gives the effect of double border. An outline is similar to a border as both are drawn around elements, but they differ in the below mentioned points.
1. Outlines do not take up space
An element's box model consists of the content area, the padding, the border and the margin. Outlines are not part of the box model, and thus do not take up any space on the webpage. Since an outline is not a part of the box model of an element, so it does not effect the dimensions (width or height) of the element i.e. the width
and height
properties do not contain the width of outlines. This also means that adding or removing an outline will have no effect on the position of the element in the layout.
See the Pen outline property example by Aakhya Singh (@aakhya) on CodePen.
As you can see, the span element in the div is given an orange colored outline which did not effect its position in the div or the layout.
2. Outlines do not take the shape of border
The corners of an outline cannot be made round. There is a property border-radius
using which you can make the corners of a border round but there is no such outline-radius property for outlines.
See the Pen outline around rounded corner border by Aakhya Singh (@aakhya) on CodePen.
The above div is given border-radus: 50px which made the corners of the border rounded, but this sis not effect the shape of the outline.
3. Outlines are drawn on all the four sides of an element
You can give borders on any number of sides of an element, but that is not the case with outlines. An outline is drawn on all the four sides of an element.
See the Pen outline with border on two sides by Aakhya Singh (@aakhya) on CodePen.
In the above div, the div is given a yellow background color, an orange outline and borders on only the top and the left sides.
4. The distance between outline and border can be changed
You can change the distance between an outline and a border using the outline-offset property. You can even give negative values to this property which moves the outline inside the box model.
See the Pen outline-offset example by Aakhya Singh (@aakhya) on CodePen.
Browser Support
All major modern browsers support this property. However, the outline
property is supported by IE 8 only if a !DOCTYPE is specified. The value invert
is supported by only IE 8 and its higher versions and Edge. There is a non-standard property -moz-outline-radius
which is supported by only Firefox.