Tailwind CSS - Border Spacing

Controlling Border Spacing in Tailwind CSS

Tailwind CSS provides border-spacing-* utilities to control the space between the borders of table cells. Important: These utilities only have an effect on tables where the border-collapse property is set to separate, which you can achieve with the border-separate utility.

Border Spacing Utilities

You can control the border spacing on the x-axis, y-axis, or both simultaneously. The syntax follows a consistent pattern:

• border-spacing-x-{amount}: Controls horizontal spacing.
• border-spacing-y-{amount}: Controls vertical spacing.
• border-spacing-{amount}: Controls both horizontal and vertical spacing simultaneously.

The {amount} corresponds to Tailwind’s default spacing scale (e.g., 0, px, 0.5, 1, 1.5, 2, up to 96).

Class	CSS Properties
border-spacing-x-0	border-spacing: 0px var(—tw-border-spacing-y);
border-spacing-y-4	border-spacing: var(—tw-border-spacing-x) 1rem;
border-spacing-px	border-spacing: 1px 1px;
border-spacing-2	border-spacing: 0.5rem 0.5rem;

Contextual Reminder

Remember, for spacing elements other than table cells (like Flexbox or Grid items), you should use the gap-* utilities. For controlling space outside an element’s border, use margin (m-*), and for space inside the border, use padding (p-*).

Practical Examples

Example 1: Uniform Border Spacing

This example applies equal spacing on both the x and y axes for a clean, uniform look. The border-separate class is essential for the border-spacing-* utilities to work.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Uniform Border Spacing</title>
</head>
<body class="p-4 md:p-8 bg-slate-50">
  <h1 class="text-2xl font-bold mb-4">Product Inventory</h1>
  <table class="w-full border-separate border-spacing-2 text-left">
    <thead>
      <tr>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">Product</th>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">SKU</th>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">Laptop</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">LP-101</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">42</td>
      </tr>
      <tr>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">Keyboard</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">KB-203</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">110</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Example 2: Axis-Specific Spacing

Here, we use border-spacing-x-* and border-spacing-y-* to apply different spacing values for the horizontal and vertical axes, allowing for more precise layout control.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Axis-Specific Border Spacing</title>
</head>
<body class="p-4 md:p-8 bg-slate-50">
  <h1 class="text-2xl font-bold mb-4">User List</h1>
  <!-- More horizontal space than vertical space -->
  <table class="w-full border-separate border-spacing-x-4 border-spacing-y-2 text-left">
    <thead>
      <tr>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">Name</th>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">Email</th>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 bg-white border border-blue-200 rounded-md">Alice Johnson</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">alice@example.com</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">Admin</td>
      </tr>
      <tr>
        <td class="p-3 bg-white border border-blue-200 rounded-md">Bob Williams</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">bob@example.com</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">User</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Arbitrary Values

For pixel-perfect adjustments, you can use arbitrary values: <table class="border-separate border-spacing-x-[10px] border-spacing-y-[15px]">...</table>