Border Collapse

Controls the collapsing or separation of table borders.

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

Collapse

Each table cell will have its own border.

Name	Email
John Doe	john@example.com
Jane Smith	jane@example.com

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

Separate

The table borders will be merged.

Name	Email
John Doe	john@example.com
Jane Smith	jane@example.com

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

---

Using responsive modifiers

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

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

Using hover modifiers

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

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