Set the style of the border with CSS

To set the style of border, use the border-style property. The border-style property allows you to select one of the following styles of the border:

• none: No border
• solid: Border is a single solid line.
• dotted: Border is a series of dots.
• dashed: Border is a series of short lines.
• double: Border is two solid lines.
• groove: Border looks as though it is carved into the page.
• ridge: Border looks the opposite of groove.
• inset: Border makes the box look like it is embedded in the page.
• outset: Border makes the box look like it is coming out of the canvas.
• hidden: Same as none, except in terms of border-conflict resolution for table elements.

Example

You can try to run the following code to set the style of the border:

   
   
   .
      

         This is a border with none width.
      
      

         This is a solid border.
      
      

         This is a dashed border.
      
      

         This is a double border.
      
      

         This is a groove border.