The border-style property sets the style of all four borders of an element, and can have from one to four values.

/* sets all 4 borders */
div {
    border-style: dashed;
}

/* sets the top and bottom border to dashed, and the left and right borders to solid */
div {
    border-style: dashed solid;
}

/* sets the top border to dashed, the two side borders to solid,and the bottom border to dotted */
div {
    border-style: dashed solid dotted;
}

/* sets the top border to dashed, the right side border to solid,the bottom border to dotted, and the left side border to groove */
div {
    border-width: dashed solid dotted groove;
}

Default value	none
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
none	Specifies no border (default)
hidden	The same as "none" (except in border conflict resolution for table elements)
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
ridge	Specifies a 3D ridged border
inset	Specifies a 3D inset border
outset	Specifies a 3D outset border
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.borderStyle = 'dashed solid';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.borderStyle = 'dashed solid';
}
</script>

---