More
)
It is allow you to specify how the border style should look like.
Syntax -
border-style: style_value;
Some rules are :-
If there is only one style value in border style property :
border-style: dotted;
If there is two style values in border style property:
border-style: dotted solid;
If there is three style values in border style property:
border-style: dotted solid double;
If there is four style values in border style property:
border-style: dotted solid double dashed;
Values
|
Dotted |
Specifies a dotted border. |
|
dashed |
Specifies a dashed border. |
|
Solid |
Specifies a solid border. |
|
double |
Specifies a double border. |
|
groove |
Specifies a 3D grooved border. The effect depends on the border-color value. |
|
ridge |
Specifies a 3D ridge border. The effect depends on the border-color value. |
|
inset |
Specifies a 3D inset border. The effect depends on the border-color value. |
|
outset |
Specifies a 3D outset border. The effect depends on the border-color value. |
For example:-
Mon -
Sun 8.00 AM - 8.00 PM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Style</title>
<style>
.one_style {
border-style: dashed;
}
.two_style {
border-style: solid dotted;
}
.three_style {
border-style: solid dashed dotted;
}
.four_style {
border-style: solid dotted dashed groove;
}
</style>
</head>
<body>
<h4 class="one_style">One style border!</h4>
<h4 class="two_style">two style border!</h4>
<h4 class="three_style">three style border!</h4>
<h4 class="four_style">four style border!</h4>
</body>
</html>
Output
