Part 32: Borders, Divide Utilities & Outline Styles

Adding borders and dividers separates content visually and provides subtle boundaries.

1. Border Width and Color

• border: 1px solid border.
• border-2, border-4, border-8: Heavier border widths.
• Directional borders: border-t, border-b, border-l, border-r.
• Border colors: border-slate-200, border-blue-500.

2. The divide-* Utilities (List Dividers)

Instead of adding border-b to list items and then removing it from the last item via :last-child, Tailwind provides divide-y:

<ul class="divide-y divide-slate-100 bg-white rounded-xl border shadow">
  <li class="p-4 hover:bg-slate-50">Profile Settings</li>
  <li class="p-4 hover:bg-slate-50">Billing Information</li>
  <li class="p-4 hover:bg-slate-50">API Keys</li>
  <li class="p-4 hover:bg-slate-50">Sign Out</li>
</ul>

3. Outline Utilities for Accessible Focus

• outline-none: Suppresses default browser outline.
• focus-visible:outline-2 focus-visible:outline-blue-600: Restores high-contrast keyboard accessibility.

Key Takeaways

• Use divide-y on parent containers to automatically insert borders between children.
• Always provide accessible focus outlines for keyboard navigation.

In Part 33, we will explore Border Radius (Rounded) & Pill Buttons!