Add a "solid" outline around a <div> element:
document.getElementById("myDiv").style.outlineStyle = "solid";
<!DOCTYPE html> <html> <head> <style> #myDiv {/* w w w . j a va2 s .c o m*/ border: 1px solid red; } </style> </head> <body> <div id="myDiv">This is a div element.</div> <br> <button type="button" onclick="myFunction()">Set outline style</button> <script> function myFunction() { document.getElementById("myDiv").style.outlineStyle = "dotted"; } </script> </body> </html>
The outlineStyle property sets or gets the style of the outline.
An outline is a line around an element.
It is displayed around the margin of the element.
The outline is not a part of the element's dimensions.
The element's width and height properties do not contain the width of the outline.
Property Values
| Value | Description |
|---|---|
| none | No outline. default |
| hidden | outline is off |
| dotted | a dotted outline |
| dashed | a dashed outline |
| solid | a solid outline |
| double | a double outline |
| groove | a 3D grooved outline. |
| ridge | a 3D ridged outline. |
| inset | a 3D inset outline. |
| outset | a 3D outset outline. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The outlineStyle property returns a String representing the style of an element's outline.