Javascript DOM CSS Style borderBottomWidth Property

Introduction

Change the width of the bottom border of a <div> element to 10px:

document.getElementById("myDiv").style.borderBottomWidth = "10px";

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {/* w  ww .j  a  v a 2  s.  c  o  m*/
  border-style: solid;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Change width of the bottom border</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.borderBottomWidth = "10px";
}
</script>

</body>
</html>

The borderBottomWidth property sets or gets the width of the bottom border of an element.

Property Values

Value	Description
thin	Defines a thin border
medium	Defines a medium border. `Default`
thick	Defines a thick border
length	The width of the border in length units
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderBottomWidth property returns a string representing the width of an element's bottom border.

Previous Next