CSS outline-style property

CSSWeb DevelopmentFront End Technology

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.
Updated on 04-Mar-2020 12:41:19