HTML | DOM Style border Property
The DOM Style border Property is used to sets or returns the style of an element’s border.We can set the different style of the border for individual sides(top, right, bottom, left). The border-style property can take multiple values for each side.
Syntax:
- It is used to return the Style Property.
object.style.borderStyle
- It is used to set the Style Property.
object.style.borderStyle = value
DOM border-style Property Values
- none: No border is created and it is left plain
- hidden: Just like None it doesnt show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value.
- dotted: A series of dots are displayed in a line as the border.
- solid: A single solid and bold line is used as a border.
- dashed: A series of square dashed lines are used as border.
- double: Two lines placed parallel to each other act as the border.
- groove: Displays a 3D grooved border, it’s effect depends on border-color value.
- ridge: Displays a 3D ridged border, it’s effect depends on border-color value.
- inset: Displays a 3D inset border, it’s effect depends on border-color value.
Return Value: It returns a string value which represent the style of an element’s border.
Example-1:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; font-size: 39px; } #GFG { border: thick solid coral; width: 70%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>DOM Style border Property.</h2> <div id="GFG"> <p>GeeksForGeeks.</p> <p>A Computer Science Portal for geeks.</p> </div> <br> <button type="button" onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Return the style property. document.getElementById("GFG").style.borderStyle = "dashed dotted double solid"; } </script></body></html> |
Output: Before Clicking On Button:
After Clicking On Button:
Example-2:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; font-size: 39px; } #GFG { width: 70%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>DOM Style border Property.</h2> <div id="GFG"> <p>GeeksForGeeks.</p> <p>A Computer Science Portal for geeks.</p> </div> <br> <button type="button" onclick="myGeeks()"> Submit </button> <script> function myGeeks() { // Return the dotted style border. document.getElementById("GFG").style.borderStyle = " dotted "; } </script></body></html> |
Output: Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Style border Property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above
Please Login to comment...