outline-style Description:
The outline-style property defines the style of the outline.
outline-style in CSS Versions:
outline-style Syntax:
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | inherit
- none
No outline displayed. - dotted
A dotted line drawn above the background. - dashed
A dashed line drawn above the background. - solid
A solid line.
- double
A double line drawn above the background. The sum of the two single lines and the space between is the value of the outline-width. - groove
A 3-D groove drawn in colors based on the color property. - ridge
A 3-D ridge drawn in colors based on the color property. - inset
A 3-D inset drawn in colors based on the color property in separated borders model (CSS 2). Same as ridge in collapsing borders model.
- outset
A 3-D outset drawn in colors based on the color property in separated borders model (CSS 2). Same as groove in collapsing borders model. - hidden
Same as none, but in the collapsing border model inhibits any other border (CSS 2). - inherit
The element should have the same outline-style setting as the parent.
outline-style Initial Value:
none
outline-style Applies To
All elements.
outline-style Inheritance
This property is not inherited.
outline-style Browser Support:
outline-style media type:
- Interactive
- Visual
outline-style Examples:
Change the outline-style to solid
<p style="outline-color : red; outline-style: solid; outline-width: thin;">
This paragraph has a solid red outline.
</p>
outline-style Special Notes:
- Outlines do not take up space like borders do.
- Outlines do not have to be rectangular.
- You need to define the style, width, and style of the outline to have it display.
