CSSoutline-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".
Theoutline-style property specifies the style of anoutline.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.outlineStyle="dashed"Try it |
Tips and Notes
Note: Outlines differ fromborders! 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 aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
A groove outline:
outline-style: groove;
outline-color: coral;
outline-width: 7px;
}
Example
A ridge outline:
outline-style: ridge;
outline-color: coral;
outline-width: 7px;
}
Example
An inset outline:
outline-style: inset;
outline-color: coral;
outline-width: 7px;
}
Example
An outset outline:
outline-style: outset;
outline-color: coral;
outline-width: 7px;
}
Example
Set the style of an outline using different values:
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;}
Related Pages
CSS tutorial:CSS Outline
CSS reference:outline property
HTML DOM reference:outlineStyle property
