HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Set a style for the outline
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 |
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 |
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 |
A dashed outline:
div {outline-style: dashed;}
A solid outline:
div {outline-style: solid;}
A double outline:
div {outline-style: double;}
A groove outline:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
A ridge outline:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
An inset outline:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
An outset outline:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
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;}
CSS tutorial: CSS Outline
CSS reference: outline property
HTML DOM reference: outlineStyle property