HTML | DOM Style borderSpacing Property

The DOM Style borderSpacing Property is used to set or return the spacing between the cells in a table.

Syntax:

To get the borderSpacing property
```
object.style.borderSpacing
```

To set the borderSpacing property

object.style.borderSpacing = "length | initial | inherit"

Property Values

length: This is used to specify the length between in the cells in fixed units. Negative values are not allowed. The default value is 0.
initial: This is used to set the property to its default value.
inherit: This is used to inherit the value from the element’s parent.

Some examples demonstrating these values are shown below:
Example-1: Using one value to specify both the horizontal and vertical spacing together.

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM Style BorderSpacing</title> 
</head> 
<body> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b>DOM Style BorderSpacing</b> 
  
    <table id="table" border="1"> 
        <tr> 
            <th>Author</th> 
            <th>Articles</th> 
        </tr> 
        <tr> 
            <td>John</td> 
            <td>100</td> 
        </tr> 
        <tr> 
            <td>Sam</td> 
            <td>50</td> 
        </tr> 
        <tr> 
            <td>Rony</td> 
            <td>230</td> 
        </tr> 
    </table> 
    <br> 
  
    <button type="button" onclick="changeSpacing()"> 
      Change border spacing 
    </button> 
  
    <script> 
        function changeSpacing() { 
            elem = document.querySelector("#table"); 
  
            // setting the border spacing 
            elem.style.borderSpacing = "10px"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking the button:

before

After clicking the button:

single-after

Example-2: Using two values to specify the horizontal and vertical spacing separately.

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM Style BorderSpacing</title> 
</head> 
<body> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b>DOM Style BorderSpacing</b> 
  
    <table id="table" border="1"> 
        <tr> 
            <th>Author</th> 
            <th>Articles</th> 
        </tr> 
        <tr> 
            <td>John</td> 
            <td>100</td> 
        </tr> 
        <tr> 
            <td>Sam</td> 
            <td>50</td> 
        </tr> 
        <tr> 
            <td>Rony</td> 
            <td>230</td> 
        </tr> 
    </table> 
    <br> 
  
    <button type="button" onclick="changeSpacing()"> 
      Change border spacing 
    </button> 
  
    <script> 
        function changeSpacing() { 
            elem = document.querySelector("#table"); 
  
            // setting the border spacing 
            elem.style.borderSpacing = "20px 5px"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking the button:

before

After clicking the button:

double-val-after

Example-3: Using the initial value.

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM Style BorderSpacing</title> 
</head> 
<body> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b>DOM Style BorderSpacing</b> 
  
    <table id="table" border="1"> 
        <tr> 
            <th>Author</th> 
            <th>Articles</th> 
        </tr> 
        <tr> 
            <td>John</td> 
            <td>100</td> 
        </tr> 
        <tr> 
            <td>Sam</td> 
            <td>50</td> 
        </tr> 
        <tr> 
            <td>Rony</td> 
            <td>230</td> 
        </tr> 
    </table> 
    <br> 
  
    <button type="button" onclick="changeSpacing()"> 
      Change border spacing 
    </button> 
  
    <script> 
        function changeSpacing() { 
            elem = document.querySelector("#table"); 
  
            // setting the border spacing 
            elem.style.borderSpacing = "initial"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking the button:

before

After clicking the button:

initial-after

Example-4: Using the inherit value.

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM Style BorderSpacing</title> 
    <style> 
  
         /* setting the border spacing of the parent */ 
        #parent { 
                border-spacing: 10px; 
         } 
    </style> 
</head> 
<body> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b>DOM Style BorderSpacing</b> 
    <div id="parent"> 
        <table id="table" border="1"> 
            <tr> 
                <th>Author</th> 
                <th>Articles</th> 
            </tr> 
            <tr> 
                <td>John</td> 
                <td>100</td> 
            </tr> 
            <tr> 
                <td>Sam</td> 
                <td>50</td> 
            </tr> 
            <tr> 
                <td>Rony</td> 
                <td>230</td> 
            </tr> 
        </table> 
    </div> 
    <br> 
  
    <button type="button" onclick="changeSpacing()"> 
      Change border spacing 
    </button> 
  
    <script> 
        function changeSpacing() { 
            elem = document.querySelector("#table"); 
  
            // setting the border spacing 
            elem.style.borderSpacing = "inherit"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking the button:

before

After clicking the button:

inherit-after

Supported Browsers: The browser supported by borderSpacing Property are listed below:

Chrome
Internet Explorer 9.0
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: