Javascript DOM CSS Style borderStyle Property

Introduction

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

document.getElementById("myDiv").style.borderStyle = "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 border</button>

<script>
function myFunction() {//from   w  ww.j  ava2s.  c o m
  document.getElementById("myDiv").style.borderStyle = "solid";
}
</script>

</body>
</html>

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

This property can take from one to four values:

Value Count Example Description
One value p {border-style: solid} all four borders will be solid
Two valuesp {border-style: solid dotted} top and bottom border will be solid, left and right border will be dotted
Three values p {border-style: solid dotted double} top border will be solid, left and right border will be dotted, bottom border will be double
Four values p {border-style: solid dotted double dashed} top border will be solid, right border will be dotted, bottom border will be double, left border will be dashed

Property Values

Value Description
noneDefines no border. default
hidden The same as "none"
dotted a dotted border
dashed a dashed border
solid a solid border
double two borders.
groove a 3D grooved border. The effect depends on the border-color value
ridge a 3D ridged border. The effect depends on the border-color value
inset a 3D inset border. The effect depends on the border-color value
outset a 3D outset border. The effect depends on the border-color value
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

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




PreviousNext

Related