Border Collapse

Controls the collapsing or separation of table borders.

Class	Properties
bc-c	border-collapse: collapse;
bc-s	border-collapse: separate;

Collapse

Each table cell will have its own border.

<table class="bg-white b-1 bc-l-silver-1 bc-c w-full">
  <tr>
    <th class="b-1 bc-l-silver-1 p-2 tc-lead">Name</th>
    <th class="b-1 bc-l-silver-1 p-2 tc-lead">Email</th>
  </tr>
  <tr>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">John Doe</td>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">john@example.com</td>
  </tr>
  <tr>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">Jane Smith</td>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">jane@example.com</td>
  </tr>
</table>

Separate

The table borders will be merged.

<table class="bg-white b-1 bc-l-silver-1 bc-s w-full">
  <tr>
    <th class="b-1 bc-l-silver-1 p-2 tc-lead">Name</th>
    <th class="b-1 bc-l-silver-1 p-2 tc-lead">Email</th>
  </tr>
  <tr>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">John Doe</td>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">john@example.com</td>
  </tr>
  <tr>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">Jane Smith</td>
    <td class="b-1 bc-l-silver-1 p-2 tc-gray">jane@example.com</td>
  </tr>
</table>

---

Using breakpoints

Using responsive breakpoints like sm:bc-*, md:bc-*, lg:bc-*, and xxl:bc-* allows targeting specific utilities in different viewports.

<div class="bc-s md:bc-c ..."></div>

Using variants

Using :hover variants such as h:bc-* allows you to override elements and change their values when hovering over them.

<div class="bc-s h:bc-c ..."></div>