Javascript Reference - HTML DOM Style borderTopStyle Property

The borderTopStyle property sets or gets the style of the top border of an element.

Browser Support


`borderTopStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderTopStyle property:

var v = object.style.borderTopStyle

Set the borderTopStyle property:

object.style.borderTopStyle=value|initial|inherit

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 top border
CSS Version	CSS1

Example

The following code shows how to add a solid top border.


<!DOCTYPE html>
<html>
<body>
<!--from   w  ww  . ja  v  a  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.borderTopStyle = "solid";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the style of the top border of a <div> element to dotted.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--   w ww  .  j a v a2 s . com-->
    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.borderTopStyle = "dotted";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

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


<!DOCTYPE html>
<html>
<body>
<!--   w w  w. j a va 2s.  com-->
<div id="myDiv" style="border-top:double;">This is a div.</div>

<button type="button" onclick="myFunction()">test</button>

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

</body>
</html>

The code above is rendered as follows:

Example 4

A demonstration of all the different values:


<!DOCTYPE html>
<html>
<body>
<!--from ww w  .  j a  va2 s  .com-->
<div id="myDiv">This is a div element</div>
<select onchange="myFunction(this);">
  <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.borderTopStyle = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows: