The border-spacing property in CSS is used to set the distance between borders of adjacent table cells.
- Controls the space between neighboring table cell borders.
- Works only when border-collapse is set to separate (not collapse).
- Can take one value (uniform spacing) or two values (horizontal and vertical spacing).
Syntax:
border-spacing: length|initial|inherit; Default Value: 2px
Property values
- length: Sets the distance between adjacent cell borders; negative values are not allowed.
- Two values: First value defines horizontal spacing, second defines vertical spacing.
- One value: Applies the same spacing to both horizontal and vertical directions.
- initial: Sets the property to its default value.
<!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: transparent;
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>