Open In App

CSS border-spacing Property

Last Updated : 26 Aug, 2024
Comments
Improve
Suggest changes
1 Likes
Like
Report

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: 

  1. 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, the first value defines the horizontal space and the 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.
  2. 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: 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>

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

M

manaschhabra2
Improve
Article Tags :

Explore

Lightbox