HTML DOM Style borderCollapse Property

Last Updated : 12 Jun, 2023

The DOM Style borderCollapse property in HTML is used to set or return whether the border of the table collapsed into a single border or not.

Syntax:

It is used to return the borderCollapse property.

object.style.borderCollapse

It is used to set borderCollapse property.

object.style.borderCollapse = "separate|collapse|initial|inherit"

Property Values:

separate: This property is used to set a separate border of a cell.
collapse: It is used to collapse adjacent cells and make a common border.
initial: It is used to set border-collapse property to its default value.
inherit: It is used when border-collapse property inherits from its parent elements.

Return Value: It returns a string value that represents a border of the table.

Example 1: In this example, we will use borderCollapse property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style borderCollapse Property
    </title>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style borderCollapse Property</h2>
        <table id="gfg" border="1">
            <tr>
                <th>Student Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>20</td>
            </tr>
        </table>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <!-- script to collapse border -->
        <script>
            function geeks() {
                document.getElementById("gfg").style.borderCollapse =
                    "collapse";
            }
        </script>
    </center>
</body>
</html>

Output:

Example 2: In this example, we will collapse the border by using the property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style borderCollapse Property
    </title>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style borderCollapse Property</h2>
        <table id="gfg" border="1"
               style="border-collapse:collapse;">
            <tr>
                <th>Student Name </th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>20</td>
            </tr>
        </table>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <!-- script to return borderCollapse value -->
        <script>
            function geeks() {
                alert(
                document.getElementById("gfg").style.borderCollapse);
            }
        </script>
    </center>
</body>
</html>