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:
<html> <head> </head> <body>. <p style = "border-width:4px; border-style:none;"> This is a border with none width. </p> <p style = "border-width:4px; border-style:solid;"> This is a solid border. </p> <p style = "border-width:4px; border-style:dashed;"> This is a dashed border. </p> <p style = "border-width:4px; border-style:double;"> This is a double border. </p> <p style = "border-width:4px; border-style:groove;"> This is a groove border. </p> </body> </html>