- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS outline-style property
59 Lectures 8.5 hours
23 Lectures 8 hours
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.
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>
- The outline-style Property in CSS
- CSS outline property
- HTML DOM Style outline Property
- CSS outline-color property
- CSS outline-width property
- Animate CSS outline-offset property
- Set outline style as ridge with CSS
- How to style outline buttons with CSS?
- The outline-color Property in CSS
- The outline Shorthand Property in CSS
- The outline-width Property in CSS
- Set outline style as a groove with CSS
- Set outline style as a dotted line with CSS
- Set the line style for the outline with CSS
- Set outline style as two solid lines with CSS