CSS: outline-style property

This CSS tutorial explains how to use the CSS property called outline-style with syntax and examples.

Description

The CSS outline-style property defines the outline style of an element, which is a line that is drawn outside the border edge of an element.

The syntax for the outline-style CSS property is:

outline-style: value;

value

The line style of the outline for an element. It can be one of the following:

Value	Description
none	No outline (This is the default) div { outline-style: none; }
solid	Single, straight, solid line div { outline-style: solid; }
dotted	Series of dots div { outline-style: dotted; }
dashed	Series of short dashes div { outline-style: dashed; }
double	Two straight lines that total the pixel amount defined by outline-width div { outline-style: double; }
groove	Carved effect div { outline-style: groove; }
ridge	3D appearance where outline looks like it is "coming out" (opposite of groove) div { outline-style: ridge; }
inset	Embedded appearance div { outline-style: inset; }
outset	Embossed appearance (opposite of inset) div { outline-style: outset; }
auto	Outline-style is determined by browser div { outline-style: auto; }
inherit	Element will inherit the outline-style from its parent element div { outline-style: inherit; }

The CSS outline-style property has basic support with the following browsers:

We will discuss the outline-style property below, exploring examples of how to use this property in CSS with other outline properties.

p { outline-style: solid; outline-color: black; }

In this CSS outline-style example, we have set the outline-style to solid which will create a solid black line around the text in the <p> tag.

You can use the outline-style property with other tags such as <div> tags.

For example:

div { outline-style: dashed; outline-color: #FF0000; }

This outline-style example would draw a red dashed line around the <div> tag.

We could modify the example above and apply stying to the outline-width property as follows:

div { outline-style: dashed; outline-color: #FF0000; outline-width: thick; }

This example would change our outline to a thick red dashed line.