Javascript Reference - HTML DOM Style borderBottomStyle Property

The borderBottomStyle property sets or gets the style of the bottom border of an element.

Browser Support


`borderBottomStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderBottomStyle property:

var v = object.style.borderBottomStyle

Set the borderBottomStyle property:

object.style.borderBottomStyle = value

Property Values

Value	Description
none	Default. Defines no border.
hidden	Same as 'none', except for table elements
dotted	dotted border
dashed	dashed border
solid	solid line border
double	double line borders.
groove	Defines a 3D grooved border
ridge	Defines a 3D ridged border.
inset	Defines a 3D inset border.
outset	Defines a 3D outset border.
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

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

Example

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


<!DOCTYPE html>
<html>
<head><style>
#myDiv {<!--from   w w  w  . ja va2  s.  co m-->
    border: thick dotted #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.borderBottomStyle = "solid";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use change the bottom border style.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w w w.  j a v a2s. c om-->
    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.borderBottomStyle = "dotted";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to use get the bottom border style.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-bottom:double;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   ww  w.j  a va2s.co m-->
    console.log(document.getElementById("myDiv").style.borderBottomStyle);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

A demonstration of all the different values:


<!DOCTYPE html>
<html>
<body>
<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><!--from   ww  w  .  j av  a2s.com-->

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

The code above is rendered as follows: