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:
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!