Border Spacing

Set the distance between table borders.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Usage

A	B
C	D

<table class="w-full bc-slate bw-1 bs-d bs-4">
  <tbody>
    <tr>
      <td class="p-4 bc-slate c-slate bw-1 bs-d ta-c">A</td>
      <td class="p-4 bc-slate c-slate bw-1 bs-d ta-c">B</td>
    </tr>
    <tr>
      <td class="p-4 bc-slate c-slate bw-1 bs-d ta-c">C</td>
      <td class="p-4 bc-slate c-slate bw-1 bs-d ta-c">D</td>
    </tr>
  </tbody>
</table>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:bs-*

Small≥640px

md:bs-*

Medium≥768px

lg:bs-*

Large≥1024px

xxl:bs-*

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:bs-*

Negative Values

Use negative variants to apply negative border spacing values.

Use the -- syntax to apply negative numeric values.