Use CSS border-style property To set different border types of HTML Elements.
Follow are the different border types:
| dotted | Sets a dotted border |
| dashed | Sets a dashed border |
| solid | Sets a solid border |
| double | Sets a double border |
| groove | Sets a 3D grooved border |
| ridge | Sets a 3D ridged border |
| inset | Sets a 3D inset border |
| outset | Sets a 3D outset border |
| none | Sets no border |
| hidden | Sets a hidden border |
Dotted Border style example
<html>
<head>
<style>
div{
border-style: dotted;
border-color: black;
}
</style>
</head>
<body>
<div>
Dotted Border style example
</div>
</body>
</html>Dashed Border style example
<html>
<head>
<style>
div{
border-style: dashed;
border-color: black;
}
</style>
</head>
<body>
<div>
dashed Border style example
</div>
</body>
</html>Solid Border style example
<html>
<head>
<style>
div{
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div>
solid Border style example
</div>
</body>
</html>Double Border style example
<html>
<head>
<style>
div{
border-style: double;
border-color: black;
}
</style>
</head>
<body>
<div>
double Border style example
</div>
</body>
</html>Groove Border style example
<html>
<head>
<style>
div{
border-style: groove;
border-color: black;
}
</style>
</head>
<body>
<div>
groove Border style example
</div>
</body>
</html>Ridge Border style example
<html>
<head>
<style>
div{
border-style: ridge;
border-color: black;
}
</style>
</head>
<body>
<div>
ridge Border style example
</div>
</body>
</html>Inset Border style example
<html>
<head>
<style>
div{
border-style: inset;
border-color: black;
}
</style>
</head>
<body>
<div>
inset Border style example
</div>
</body>
</html>Outset Border style example
<html>
<head>
<style>
div{
border-style: outset;
border-color: black;
}
</style>
</head>
<body>
<div>
outset Border style example
</div>
</body>
</html>