CSS outline-style Property
The outline-style property in CSS is used to customize the appearance of an element's outline. An element's outline and border are similar but not the same. The outline does not take up any space and is drawn outside of an element's border. Furthermore, by default, the outline is drawn around all four sides of the element, and there is no way to change this.
Syntax
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Example
x
<html><head><style> .ex1 { border: 2px solid #ff4842; outline-style: dotted; outline-color: #00ab55; }</style></head><body><div class="ex1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></body></html>Property Values
| Value | Description |
|---|---|
| none | There is no outline specified. This is the default setting. |
| hidden | This property specifies a hidden outline. |
| dotted | A dotted outline is specified. |
| dashed | A dashed outline is specified. |
| solid | Defining a solid outline |
| double | A double outliner is specified. |
| groove | This option specifies a 3D grooved outline. The effect is determined by the value of the outline-color. |
| ridge | This option specifies a 3D ridged outline. The effect is determined by the value of the outline-color. |
| inset | This option specifies a 3D inset outline. The effect is determined by the value of the outline-color. |
| outset | This property specifies a 3D outset outline. The effect is determined by the value of the outline-color. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| outline-style | 1.0 | 1.5 | 1.2 | 8.0 | 7.0 |