Javascript Reference - HTML DOM Style borderStyle Property

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

The borderStyle property can take from one to four values:

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

Browser Support


`borderStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderStyle property:

var v = object.style.borderStyle

Set the borderStyle property:

object.style.borderStyle=value

Property Values

Value	Description
none	no border
hidden	The same as "none", except in border conflict resolution for table elements
dotted	a dotted border
dashed	a dashed border
solid	a solid border
double	a double border
groove	a 3D grooved border whose effect depends on the border-color value
ridge	a 3D ridged border whose effect depends on the border-color value
inset	a 3D inset border whose effect depends on the border-color value
outset	a 3D outset border whose effect depends on the border-color value
inherit	inherit the border style from the parent element

Technical Details

Default Value:	none
Return Value:	A string representing the style of border
CSS Version	CSS1

Example

The following code shows how to add a solid border to a <div> element.


<!DOCTYPE html>
<html>
<body>
<!--from  w  w w  .java  2 s.c o m-->
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderStyle = "solid";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the style of the four borders.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w w  w .j  ava2  s  . c  o  m-->
    border: thick solid #FF0000;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the border style of a <div> element:


<!DOCTYPE html>
<html>
<body>
<!--from   www . j  a v  a  2 s. c o m-->
<div id="myDiv" style="border-style:groove dotted;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.borderStyle);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

A demonstration of all the different values:


<!DOCTYPE html>
<html>
<body>
<!--from  w  w w. java 2  s  . co  m-->
<div id="myDiv">This is a div element</div>
<br>

<select onchange="myFunction(this);" size="10">
  <option>none</option>
  <option>hidden</option>
  <option>dotted</option>
  <option>dashed</option>
  <option>solid</option>
  <option>double</option>
  <option>groove</option>
  <option>ridge</option>
  <option>inset</option>
  <option>outset</option>
</select>

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myDiv").style.borderStyle = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows: