Add a "solid" border to a <div> element:
document.getElementById("myDiv").style.borderStyle = "solid";
<!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 values | p {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 |
---|---|
none | Defines 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.