CSS border-style property
CSS border-style Property
Description
The border-style property allows you to select one of the following border styles –
- none – No border. (Equivalent to border-width:0;)
-
solid – The border is a solid line.
-
dotted – The border is a series of dots.
-
dashed – The border is a series of dashed lines.
-
double – The border is two solid lines.
-
groove – The border looks like it’s carved into the page.
-
ridge – The border looks like the opposite of a groove.
-
inset – The border makes the box look inset into the page.
-
outset – Borders make the box appear to come out of the canvas.
-
hidden – Same as none, except for resolving border conflicts for table elements.
You can individually change the style of an element’s bottom, left, top, and right borders using the following properties –
- border-bottom-style – Changes the style of the bottom border.
-
border-top-style – Changes the style of the top border.
-
border-left-style – Changes the style of the left border.
-
border-right-style – Changes the style of the right border.
Possible Values
Any of the above values.
Applies to
All HTML elements.
DOM Syntax
object.style.borderStyle = "Any of the values defined above";
Example
Below is an example showing all of these border styles −
<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>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is an inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is an outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a border with four different styles.
</p>
</body>
</html>
This will produce the following result −
