CSS border-spacing Property - GeeksforGeeks

22 Aug, 2021
The border-spacing Property is used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate. 
Default Value: 
2px
Syntax:  
border-spacing: length|initial|inherit; 
Property values: 
length-length: It is used to set the distance between the borders of adjacent cells. It does not allow negative values. If two values are defined, first value defines the horizontal space and second value defines the vertical spacing.If only one value is given then it defines the both horizontal and vertical spacing between the adjacent borders of cells.initial: It sets the property to its default value.
length-length: It is used to set the distance between the borders of adjacent cells. It does not allow negative values. If two values are defined, first value defines the horizontal space and second value defines the vertical spacing.If only one value is given then it defines the both horizontal and vertical spacing between the adjacent borders of cells.
If two values are defined, first value defines the horizontal space and second value defines the vertical spacing.
If only one value is given then it defines the both horizontal and vertical spacing between the adjacent borders of cells.
initial: It sets the property to its default value.
Syntax: 
border-spacing:initial;
Example: 
html
<!DOCTYPE html><html> <head>    <title>border-spacing property</title>    <style>        table,        th,        td {            border: 2px solid green;            text-align: center;        }                 #geeks {            border-collapse: separate;            background-color: none;            border-spacing: initial;        }                 h1 {            color: green;        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h2> The border-spacing Property</h2>        <h3>border-spacing: initial;</h3>        <table style="width:70%" id="geeks">            <tr>                <th>Firstname</th>                <th>Lastname</th>                <th>Age</th>            </tr>            <tr>                <td>Harsh</td>                <td>Agarwal</td>                <td>15</td>            </tr>            <tr>                <td>Manas</td>                <td>Chhabra</td>                <td>27</td>            </tr>            <tr>                <td>Ramesh</td>                <td>Chandra</td>                <td>28</td>            </tr>        </table>    </center></body> </html>                  
Output:  
Supported Browsers: The browser supported by css border-spacing property are listed below:  
Google Chrome 1.0
Internet Explorer 8.0
Firefox 1.0
Opera 4.0
Safari 1.0
surinderdawra388
abhishek0719kadiyan
kapoorsagar226
hritikbhatnagar2182
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript