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.