CSS border-style Property
CSS border-style property is a shorthand property that sets the line style for all four sides of the border of an element. This property is a shorthand for the CSS properties like the border-bottom-style, border-left-style, border-right-style, and the border-top-style properties.
Syntax for the border-style Property
Following is the syntax for the border-style property.
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Example 1: CSS border-style Property
Here in the example below, we are using the border-style property with different border colors, and their different values. In this case, we have given the border style of the object using all the values of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-style property in CSS</title>
<style type="text/css">
table {
border-width: 3px;
background-color: #8fcf80;
}
tr, td {
padding: 2px;
}
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}
</style>
</head>
<body>
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
</body>
</html>
Output:
Example 2: CSS border-style property
Here in the example below, we are using the border-style property with different border colors, and their different values. In this case, we have given the border-style of the object as 'dashed'. This means that there will be a border of the container in a dashed fashion. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-style property in CSS</title>
<style type="text/css">
div {
border-width: 3px;
background-color: #88fcff;
}
.border-box{
border-style: dashed;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
3 |
3 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
3 |
3 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for all the constituent properties of the border-style property is none. This property is applicable to all the elements and also to the ::first-letter. The computed value for all the constituent properties of this property is the as specified one. It is not an inherited property.
