CSS - outline-color-style Property
Description
The outline-color property determines the style of an outline around an element.
Possible Values
none − No outline is drawn.
dotted − The outline is drawn as a series of dots.
dashed − The outline is drawn as a series of short line segments.
solid − The outline is drawn as a single unbroken line.
double − The outline is drawn as a pair of unbroken lines.
groove − The outline is drawn as though it were a furrow carved into the surface of the document.
ridge − The outline is drawn as though it were a ridge pushing up the surface of the document.
inset − The outline is drawn as though the entire element is pushing the surface of the document away from the user.
outset − The outline is drawn as though the entire element is pushing the surface of the document toward the user.
initial − The outline is drawn to its default value.
inherit − The outline is drawn by inheriting from its parent element.
Applies to
All the HTML elements.
DOM Syntax
object.style.outlineStyle = "solid";
Example
Here is the example −
<html> <head> <style> p {border: 1px solid blue;} </style> </head> <body> <p style = "outline-width: 5px; outline-style: solid;"> This text is having thin solid outline. </p> <p style = "outline-width: 5px; outline-style: dashed;"> This text is having thick dashed outline. </p> <p style = "outline-width: 5px; outline-style: dotted;"> This text is having 5px dotted outline. </p> <p style = "outline-width: 5px; outline-style: double;"> This text is having 5px double outline. </p> <p style = "outline-width: 5px; outline-style: groove; "> This text is having 5px groove outline. </p> <p style = "outline-width: 5px; outline-style: ridge;"> This text is having 5px double outline. </p> <p style = "outline-width: 5px; outline-style: inset;"> This text is having 5px inset outline. </p> <p style = "outline-width: 5px; outline-style: outset;"> This text is having 5px outset outline. </p> </body> </html>
To Continue Learning Please Login
Login with Google