CSS outline-style property
➔ The outline-style property specifies what type of outline should be applied to an element.
➔ The outline-style property has the following values.
dasheddotteddoublegroovehiddeninsetnoneoutsetridgesolid
Syntax
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| none | Defines no outline. This is default. |
| hidden | Defines a hidden outline. |
| dotted | Defines a dotted outline. |
| dashed | Defines the dashed outline. |
| solid | Defines the solid outline. |
| double | Defines the double outline. |
| groove | Defines the groove outline. |
| ridge | Defines the ridge outline. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
.p1 {
outline-width: 5px;
outline-style: dashed;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p2 {
outline-width: 5px;
outline-style: dotted;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p3 {
outline-width: 5px;
outline-style: double;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p4 {
outline-width: 5px;
outline-style: groove;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p5 {
outline-width: 5px;
outline-style: hidden;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p6 {
outline-width: 5px;
outline-style: inset;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p7 {
outline-width: 5px;
outline-style: none;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p8 {
outline-width: 5px;
outline-style: outset;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p9 {
outline-width: 5px;
outline-style: ridge;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p10 {
outline-width: 5px;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}Click on the "Try it Now" button to see how it works.
Note: Each outline side can not be styled separately.