HTML | DOM Style borderStyle Property
The DOM Style borderStyle property is used to set or return the border style of an element.
Syntax:
- To get the borderStyle
object.style.borderStyle
- To set the borderStyle
object.style.borderStyle = "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit"
Property Values: Each property value with the example.
| Value | Effect |
|---|---|
| none | No border is created. This is the default value. |
| hidden | Visually same as ‘none’, except it helps during border conflict resolution in table elements. |
| dotted | Dots are used as the border. |
| dashed | A dashed line is used as the border. |
| solid | A single solid line is used as the border. |
| double | Two lines are used as the border. |
| groove | A 3D grooved border is displayed. The effect depends on border-color value. |
| ridge | A 3D ridged border is displayed. The effect depends on border-color value. |
| inset | A 3D inset border is displayed. The effect depends on border-color value. |
| outset | A 3D outset border is displayed. The effect depends on border-color value. |
| initial | Sets the property to its initial value. |
| inherit | Sets the property to inherit from its parent. |
These values are demonstrated with the below examples:
Example-1: Using the none value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'none'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-2: Using the hidden value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'hidden'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-3: Using the dotted value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'dotted'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-4: Using the dashed value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'dashed'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-5: Using the solid value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px dotted green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'solid'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-6: Using the double value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'double'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-7: Using the groove value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'groove'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-8: Using the ridge value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'ridge'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-9: Using the inset value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'inset'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-10: Using the outset value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px inset green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'outset'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-11: Using the initial value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'initial'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Example-12: Using the inherit value.
<!DOCTYPE html> <html lang="en"> <head> <title> DOM Style borderStyle Property </title> <style> #parent { border-style: dotted; padding: 10px; } .item { padding: 10px; border: 15px solid green; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> DOM Style borderStyle Property </b> <div id="parent"> <p class="item"> GeeksforGeeks is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. </p> </div> <button onclick="changeBorderStyle()"> Change style </button> <script> function changeBorderStyle() { elem = document.querySelector('.item'); // Setting the border style elem.style.borderStyle = 'inherit'; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by borderStyle property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Recommended Posts:
- HTML | DOM Style right Property
- HTML | DOM Style top Property
- HTML | DOM Style listStyleType Property
- HTML | DOM Style transformOrigin Property
- HTML DOM | Style pageBreakInside Property
- HTML | DOM Style marginTop Property
- HTML | DOM Style flexBasis Property
- HTML | DOM Style tableLayout Property
- HTML | DOM Style transition Property
- HTML | DOM Style columnRuleColor Property
- HTML | DOM Style transitionDelay Property
- HTML | DOM Style margin Property
- HTML | DOM Style paddingLeft Property
- HTML | DOM Style userSelect Property
- HTML | DOM Style textIndent Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : ManasChhabra2
