BlogsDope image BlogsDope

CSS outline-style

March 21, 2021 CSS OUTLINE 730

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.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).