CSS Border Style
The border-style property sets the line style of an element's border, and a border will not appear until a style is chosen.
Choosing a line style
The <border-style> property is what actually makes a border visible. Even if you set a width and color, nothing shows until the style is something other than the default <none>. Common values include solid, dashed, dotted, and double.
A dashed border
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: dashed;
}
</style>
</head>
<body>
<div>Dashed box</div>
</body>
</html>The available styles
Different styles per side
You can give <border-style> up to four values to set the top, right, bottom, and left edges independently, moving clockwise from the top.
Mixed edge styles
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border-style: solid dashed solid dashed;
}
</style>
</head>
<body>
<div class="box">Mixed border box</div>
</body>
</html>Note: In practice most borders are set all at once with the border shorthand, which includes the style along with width and color.
A solid box
<!DOCTYPE html>
<html>
<head>
<style>
.card {
border-style: solid;
border-width: 1px;
border-color: #ddd;
}
</style>
</head>
<body>
<div class="card">Card content</div>
</body>
</html>
