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> 

Output:
Before clicking the button:
none-before

After clicking the button:
none-after

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> 

Output:
Before clicking the button:
hidden-before

After clicking the button:
hidden-after

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> 

Output:

Before clicking the button:
dotted-before

After clicking the button:
dotted-after

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> 

Output:
Before clicking the button:
dashed-before

After clicking the button:

dashed-after

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> 

Output:
Before clicking the button:
solid-before

After clicking the button:

solid-after

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> 

Output:

Before clicking the button:

double-before

After clicking the button:

double-after

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> 

Output:

Before clicking the button:
groove-before

After clicking the button:

groove-after

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> 

Output:

Before clicking the button:

ridge-before

After clicking the button:

ridge-after

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> 

Output:

Before clicking the button:

inset-before

After clicking the button:

inset-after

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> 

Output:

Before clicking the button:

outset-before

After clicking the button:

outset-after

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> 

Output:

Before clicking the button:

initial-before

After clicking the button:

initial-after

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> 

Output:

Before clicking the button:

inherit-before

After clicking the button:

inherit-after

Supported Browsers: The browser supported by borderStyle property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Apple Safari

My Personal Notes

Recommended Posts: