Javascript DOM CSS Style borderBottomStyle Property

Introduction

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

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

View in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Set solid bottom border</button>

<script>
function myFunction() {//from ww  w .  j  a v a 2  s.  c  om
  document.getElementById("myDiv").style.borderBottomStyle = "solid";
}
</script>

</body>
</html>

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

Property Values

Value Description
noneNo border. Default
hidden Same as "none"
dotted Defines a dotted border.
dashed Defines a dashed border.
solid Defines a solid border.
double Defines two 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 this property to its default value.
inherit Inherits this property from its parent element.

The borderBottomStyle property returns a String, representing the style of an element's bottom border.




PreviousNext

Related