The outline-style property specifies the style for the line that goes around an element. It can take one of the following values −
- none − No border. (Equivalent of outline-width:0;)
- solid − Outline is a single solid line.
- dotted − Outline is a series of dots.
- dashed − Outline is a series of short lines.
- double − Outline is two solid lines.
- groove − Outline looks as though it is carved into the page.
- ridge − Outline looks the opposite of groove.
- inset − Outline makes the box look like it is embedded in the page.
- outset − Outline makes the box look like it is coming out of the canvas.
- hidden − Same as none.
Example
You can try to run the following code to implement outline-style property −
<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> This text is having thin solid outline. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;"> This text is having thick dashed outline. </p> <br /> <p style = "outline-width:5px;outline-style:dotted;"> This text is having 5x dotted outline. </p> </body> </html>