The **`border-spacing`** property in #key# CSS: Cascade Style Sheets #key# is used to set the distance between the borders of cells. 

---
> This property is only used when the `border-collapse` property is set to `separate`. 
---

#     
## Syntax

---
```css
border-spacing: length|initial|inherit;
```

#      
## Property values

- `length`: Sets the values in `px`, `cm`, `pt`, etc. to define the distance between the borders.

  >If two values are defined, then the first value represents the *horizontal space* and the second value represents the *vertical space*.

- `initial`: Sets the value to its default value.

- `inherit`: Inherits property from its parent value.

## Code

Below is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the `border-spacing` property.

<html>
    <head>
        <title> Example </title>
    </head>
    
    <body>
        <h1> Border-Spacing Property </h1>
        <table id = "space">
            
            <tr>
                <td> Name </td>  
                <td> Age </td>  
                <td> Contact </td>  
            </tr>

        </table>  
    </body>  
</html>  

//Defining the properties of table
table {
    border: 2px solid rgb(0, 0, 0);  
    text-align: center;  
    font-size: 25px;  
    background-color: rgb(163, 168, 163);  
}

//Defining the details of table
td {  
    border: 5px solid rgb(0, 0, 0);  
    background-color: rgb(45, 207, 207);  
}  

//Defining the spaces details between tables
#space {  
    border-collapse: separate;  
    border-spacing: 30pt 2em;  
}  

codemirror

What is the CSS border-spacing property?

The border-spacing property in CSSCascade Style Sheets is used to set the distance between the borders of cells.   This property is only used when the border-collapse property is set to separate.    Syntax  border-spacing: length|initial|inherit;  