The CSS border-style property settles the style of an element’s four borders.
Demo:
The CSS border-style property can have from one to four values.
Each side of the border (top, right, bottom, left) can have a different style.
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
border-style: dotted solid dashed double;
}
</style>
</head>
<body>
<h4 class="one">This is a heading.</h4>
</body>
</html>Output:
This is a heading.
Syntax:
border-style: dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden;none (default) – defines no border.
hidden – a border is not visible.
dotted – defines a dotted border.
dashed – defines a dashed border.
solid – defines a solid border.
double – defines a double border.
groove – defines a 3D grooved border.
ridge – defines a 3D ridged border.
inset – defines a 3D inset border.
outset – defines a 3D outset border.
Example2:
Set different borders on each side of an element:
<!DOCTYPE html>
<html>
<head>
<style>
.a {border-style: solid dotted dashed double;}
.b {border-style: solid dotted dashed;}
.c {border-style: solid dotted;}
.d {border-style: solid;}
</style>
</head>
<body>
<h4 class="a">This is a heading.</h4>
<h4 class="b">This is a heading.</h4>
<h4 class="c">This is a heading.</h4>
<h4 class="d">This is a heading.</h4>
</body>
</html>Output:
This is a heading.
This is a heading.
This is a heading.
This is a heading.
Enjoy coding!
Read also: