CSS outline-style property sets the style of the outline. An outline is a line that is drawn outside the borders of an element for decoration purpose.
Example:
.h1{
outline-style: dotted;
}
.h2{
outline-style: dashed;
}
.h3{
outline-style: solid;
}
Below is the list of all available outline styles in CSS. Try out the below example to check how each style looks:
Example:
.p1{ outline-style: none; }
.p2{ outline-style: hidden; }
.p3{ outline-style: dotted; }
.p4{ outline-style: dashed; }
.p5{ outline-style: solid; }
.p6{ outline-style: double; }
.p7{ outline-style: groove; }
.p8{ outline-style: ridge; }
.p9{ outline-style: inset; }
.p10{ outline-style: outset; }
CSS Syntax
The outline-style property has the below syntax:
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
The outline-style property accepts the following values:
| none | This is the default value. No outline style is set. |
| hidden | The outline is hidden. |
| dotted | Specifies a dotted outline. |
| dashed | Specifies a dashed outline. |
| solid | Specifies a solid outline. |
| double | Specifies a double outline. |
| groove | Specifies a 3D groove outline. |
| ridge | Specifies a 3D ridge outline. |
| inset | Specifies a 3D inset outline. |
| outset | Specifies a 3D outset outline. |
| initial | Sets the outline-style property to its default value(none). |
| inherit | Inherits the outline-style property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.outlineStyle = “dotted”; |
