Skip to content
Related Articles

Related Articles

HTML | DOM Style borderStyle Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 Aug, 2022

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"

Return Values: It returns a string value, which representing the style of an element’s border.

Property Values: Each property value with the example.

ValueEffect
noneNo border is created. This is the default value.
hiddenVisually same as ‘none’, except it helps during border conflict resolution in table elements.
dottedDots are used as the border.
dashedA dashed line is used as the border.
solidA single solid line is used as the border.
doubleTwo lines are used as the border.
grooveA 3D grooved border is displayed. The effect depends on border-color value.
ridgeA 3D ridged border is displayed. The effect depends on border-color value.
insetA 3D inset border is displayed. The effect depends on border-color value.
outsetA 3D outset border is displayed. The effect depends on border-color value.
initialSets the property to its initial value.
inheritSets the property to inherit from its parent.

These values are demonstrated with the below examples: 

Example-1: Using the none value. 

html




<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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. 
html



<!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 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 3.5
  • Apple Safari 1

My Personal Notes
arrow_drop_up
Previous
HTML | DOM Style borderTopRightRadius Property
Next

HTML | DOM Input Color form Property
Recommended Articles
Page :
HTML | DOM Style borderImageOutset Property
18, Jan 19
HTML | DOM Style borderRightColor Property
22, Jan 19
HTML | DOM Style paddingLeft Property
25, Jan 19
HTML DOM | Style pageBreakBefore Property
29, Jan 19
HTML | DOM Style textAlign Property
31, Jan 19
HTML | DOM Style wordWrap Property
25, Mar 19
HTML | DOM Style columnWidth Property
27, Nov 19
HTML | DOM Style textOverflow Property
11, Mar 19
HTML | DOM Style overflow Property
11, Mar 19
HTML | DOM Style overflowY Property
07, Feb 19
HTML | DOM Style overflowX Property
07, Mar 19
HTML | DOM Style marginRight Property
11, Mar 19
HTML | DOM Style objectPosition Property
28, Mar 19
HTML | DOM Style textDecorationStyle Property
28, Jan 19
HTML | DOM Style transitionProperty Property
31, Jan 19
HTML | DOM Style transformStyle Property
06, Feb 19
HTML DOM | Style pageBreakInside Property
29, Jan 19
HTML | DOM Style top Property
25, Jan 19
HTML | DOM Style right Property
24, Jan 19
HTML | DOM Style transitionTimingFunction property
31, Jan 19
HTML | DOM Style order Property
06, Feb 19
HTML | DOM Style userSelect Property
25, Jan 19
HTML | DOM Style perspective Property
20, Feb 19
HTML | DOM Style border Property
22, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!