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.


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

      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
Samual Sam
Samual Sam

Learning faster. Every day.