CSS outline-style Property
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 |
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 |
More Examples
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 »
Related Pages
CSS tutorial: CSS Outline
CSS reference: outline property
HTML DOM reference: outlineStyle property
