index.md

---
title: border-spacing
slug: Web/CSS/border-spacing
page-type: css-property
browser-compat: css.properties.border-spacing
---

{{CSSRef}}

The **`border-spacing`**[CSS](/en-US/docs/Web/CSS) property sets the distance between the borders of adjacent cells in a {{htmlelement("table")}}. This property applies only when {{cssxref("border-collapse")}} is `separate`.

{{InteractiveExample("CSS Demo: border-spacing")}}

```css interactive-example-choice
border-spacing: 0;
```

```css interactive-example-choice
border-spacing: 5px;
```

```css interactive-example-choice
border-spacing: 5px 1rem;
```

```htmlinteractive-example
<section class="default-example" id="default-example">
 <table class="transition-all" id="example-element">
 <tr>
 <td>Cell 1.1</td>
 <td>Cell 1.2</td>
 </tr>
 <tr>
 <td>Cell 2.1</td>
 <td>Cell 2.2</td>
 </tr>
 <tr>
 <td>Cell 3.1</td>
 <td>Cell 3.2</td>
 </tr>
 </table>
</section>
```

```css interactive-example
table {
width: 15rem;
table-layout: fixed;
}

td {
border: 5pxsolid;
border-color: crimsondodgerblue;
padding: 0.75rem;
}
```

The `border-spacing` value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) `border-spacing` and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.

> [!NOTE]
> The `border-spacing` property is equivalent to the deprecated `cellspacing` attribute of the `<table>` element, except that `border-spacing` has an optional second value that can be used to set different horizontal and vertical spacing.

## Syntax

```css
/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;
```

The `border-spacing` property may be specified as either one or two values.

- When **one** `<length>` value is specified, it defines both the horizontal and vertical spacings between cells.
- When **two** `<length>` values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent _columns_), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent _rows_).

### Values

- {{cssxref("&lt;length&gt;")}}
 - : The size of the spacing as a fixed value.

## Formal definition

{{CSSInfo}}

## Formal syntax

{{csssyntax}}

## Examples

### Spacing and padding table cells

This example applies a spacing of `.5em` vertically and `1em` horizontally between a table's cells. Note how, along its outside edges, the table's `padding` values are added to its `border-spacing` values.

#### HTML

```html
<table>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 <tr>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
</table>
```

#### CSS

```css
table {
border-spacing: 1em0.5em;
padding: 02em1em0;
border: 1pxsolidorange;
}

td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
```

#### Result

{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
- The `border-spacing` property alters the appearance of the {{htmlelement("table")}} HTML element.
-[CSS table](/en-US/docs/Web/CSS/CSS_table) module