CSS border-spacing Property
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.
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
- Edge 12.0
- Internet Explorer 8.0
- Firefox 1.0
- Opera 4.0
- Safari 1.0
Please Login to comment...