Style borderStyle Property

Add a "solid" border to a <div> element:

document.getElementById("myDiv").style.borderStyle = "solid";

Description

The borderStyle property sets or returns the style of an element's border.

This property can take from one to four values:

One value, like: p {border-style: solid} - all four borders will be solid
Two values, like: p {border-style: solid dotted} - top and bottom border will be solid, left and right border will be dotted
Three values, like: p {border-style: solid dotted double}- top border will be solid, left and right border will be dotted, bottom border will be double
Four values, like: p {border-style: solid dotted double dashed} - top border will be solid, right border will be dotted, bottom border will be double, left border will be dashed

Property
borderStyle	Yes	Yes	Yes	Yes	Yes

Return the borderStyle property:

object.style.borderStyle

Set the borderStyle property:

object.style.borderStyle = value

Value	Description
none	Defines no border. This is default
hidden	The same as "none", except in border conflict resolution for table elements
dotted	Defines a dotted border
dashed	Defines a dashed border
solid	Defines a solid border
double	Defines two borders. The width of the two borders are the same as the border-width value
groove	Defines a 3D grooved border. The effect depends on the border-color value
ridge	Defines a 3D ridged border. The effect depends on the border-color value
inset	Defines a 3D inset border. The effect depends on the border-color value
outset	Defines a 3D outset border. The effect depends on the border-color value
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit