CSS outline-style property

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 −

      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid outline.
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      <br />
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.

Samual Sam
Samual Sam

Learning faster. Every day.

Updated on: 04-Mar-2020


Kickstart Your Career

Get certified by completing the course

Get Started