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.

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>

Samual Sam
Samual Sam

Learning faster. Every day.

Updated on: 04-Mar-2020

132 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements