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
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
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
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 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
