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.

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	Play it
none	Specifies no outline. This is default	Play it »
hidden	Specifies a hidden outline	Play it »
dotted	Specifies a dotted outline	Play it »
dashed	Specifies a dashed outline	Play it »
solid	Specifies a solid outline	Play it »
double	Specifies a double outliner	Play it »
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value	Play it »
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value	Play it »
inset	Specifies a 3D inset outline. The effect depends on the outline-color value	Play it »
outset	Specifies a 3D outset outline. The effect depends on the outline-color value	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
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 ❯