CSS outline-style Property

❮ Previous Complete CSS Reference Next ❯

Example

Set a style for the outline:

div {outline-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline-style property specifies the style of an outline.

Show demo ❯

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.outlineStyle="dashed" Try it

Tips and Notes

Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
outline-style	1.0	8.0	1.5	1.2	7.0

CSS Syntax

Property Values

Value	Description	Demo
none	Specifies no outline. This is default	Demo ❯
hidden	Specifies a hidden outline	Demo ❯
dotted	Specifies a dotted outline	Demo ❯
dashed	Specifies a dashed outline	Demo ❯
solid	Specifies a solid outline	Demo ❯
double	Specifies a double outliner	Demo ❯
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value	Demo ❯
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value	Demo ❯
inset	Specifies a 3D inset outline. The effect depends on the outline-color value	Demo ❯
outset	Specifies a 3D outset outline. The effect depends on the outline-color value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed outline:

div {outline-style: dashed;}

Try it Yourself »

Example

A solid outline:

div {outline-style: solid;}

Try it Yourself »

Example

A double outline:

div {outline-style: double;}

Try it Yourself »

Example

A groove outline:

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

A ridge outline:

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

An inset outline:

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

An outset outline:

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

Set the style of an outline using different values:

p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}

Try it Yourself »

CSS tutorial: CSS Outline

CSS reference: outline property

HTML DOM reference: outlineStyle property

❮ Previous Complete CSS Reference Next ❯