CSS outline-style Property


Example

Set the style of an outline:

p {
    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

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain 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

Note: IE8 supports the outline-style property only if a !DOCTYPE is specified.


CSS Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

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

Examples

More Examples

Example

Set the style of an outline using different values:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Try it yourself »

Related Pages

CSS tutorial: CSS Outline

CSS reference: outline property

HTML DOM reference: outlineStyle property




SHARE THIS PAGE

COLOR PICKER

colorpicker