border-spacing

Definition

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only applicable when border-collapse is set to separate). It accepts one or two values defining the horizontal and vertical spacing respectively. For instance, border-spacing: 5px; will set a 5-pixel spacing on all sides, while border-spacing: 5px 10px; will set a 5-pixel horizontal and 10-pixel vertical spacing.

Syntax

table {
  border-spacing: 1rem 0.5rem;
}

Values

<length> (one value): uniform horizontal and vertical spacing between table cells.
Two <length> values: first applies horizontally, second vertically.
Only applies when border-collapse: separate.

Practical Examples

table.pricing {
  border-collapse: separate;
  border-spacing: 0.75rem;
}

Spacing adds breathing room to table layouts without extra wrapper elements.

HTML

border-spacing: 0

Starter	$12
Pro	$24

border-spacing: 0.75rem 0.5rem

Starter	$12
Pro	$24

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border-spacing: 0</p>
    <table class="w-full text-left text-sm" style="border-collapse: separate; border-spacing: 0;">
      <tr class="bg-slate-100"><td class="border border-slate-200 px-3 py-2">Starter</td><td class="border border-slate-200 px-3 py-2 text-right">$12</td></tr>
      <tr><td class="border border-slate-200 px-3 py-2">Pro</td><td class="border border-slate-200 px-3 py-2 text-right">$24</td></tr>
    </table>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border-spacing: 0.75rem 0.5rem</p>
    <table class="w-full text-left text-sm" style="border-collapse: separate; border-spacing: 0.75rem 0.5rem;">
      <tr class="bg-slate-100"><td class="rounded-lg px-3 py-2">Starter</td><td class="rounded-lg px-3 py-2 text-right">$12</td></tr>
      <tr><td class="rounded-lg bg-slate-50 px-3 py-2">Pro</td><td class="rounded-lg bg-slate-50 px-3 py-2 text-right">$24</td></tr>
    </table>
  </div>
</div>

Tips & Best Practices

Combine with border-radius on table cells for card-like pricing tables.
Adjust horizontal and vertical spacing independently to control rhythm.
Remember to reset spacing when switching a table from separate to collapse.

Accessibility & UX Notes

Ensure spacing does not reduce readability—preserve sufficient row height for dense data.

Browser Support

Supported in modern browsers; ignored when border-collapse: collapse.

border-collapse determines whether spacing applies.
padding inside table cells works alongside spacing adjustments.
table-layout for consistent column widths when spacing changes.