The outline-style
property is used to set the style of the outline of an element. It is a longhand property of the outline
property.
Outlines are 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.
CSS
outline-style: value;
Values
none
: Specifies no outline. This is the default value. In this case, giving outline-color
and outline-width
values has no effect.
dotted
: Specifies dotted outline.
dashed
: Specifies outline as a series of small dashes.
solid
: Specifies outline as a single line.
double
: Specifies outline consisting of two parallel lines. The total outline-width
is the sum of the widths of the two lines and the perpendicular space between them
groove
: Specifies a 3D grooved outline which appears as if it were carved in canvas.
ridge
: Specifies a 3D ridged outline which appears as if it were coming out of canvas.
inset
: Specifies an outline such that the content inside the border appears as if it were embedded in canvas.
outset
: Specifies an outline such that the content inside the border appears as if it were coming out of canvas.
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.
The effects of all the above mentioned values of this property are demonstrated in the following demo.
See the Pen outline-style property values by Aakhya Singh (@aakhya) on CodePen.
The above div elements are given a black colored border and an orange outline. As stated earlier, the outline-style
property must be defined while defining the outline width or color because there needs to be an outline to change the width or color of. If no outline-color
is defined, then the browser gives the default color to the outline.
Browser Support
All major modern browsers support this property. However, the outline-style
property is supported by IE 8 only if a !DOCTYPE is specified.