Capítulo 22 de 29
Border utilities cover width/color/style across the same 11-direction grammar as spacing (all sides, both axes, logical start/end), plus border-radius (also directional/corner-specific) and a divide-* family that applies border styling between a container's children instead of around the element itself.
border-width: border alone = 1px all sides; direction-prefixed like spacing/margin (border-x/border-y/border-s/border-e/border-bs/border-be/border-t/border-r/border-b/border-l), each with -<number> (px), -(length:<custom-property>), -[<value>]. v4 default is currentColor, not a gray shade (see Upgrade Guide) — always pair with a color utility.
border-color: same 11 direction prefixes as width, each accepting -inherit/-current/-transparent + full palette + (<custom-property>)/[<value>].
border-style: border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none.
border-radius: rounded (all corners) plus logical (rounded-s/rounded-e = two adjacent logical corners each), physical-side pairs (rounded-t/rounded-r/rounded-b/rounded-l), and single-corner forms — logical (rounded-ss/rounded-se/rounded-ee/rounded-es) and physical (rounded-tl/rounded-tr/rounded-br/rounded-bl). Each combines with the --radius-* scale: -xs(2px) → -4xl(2rem), plus bare rounded/rounded-full/arbitrary forms. Note the v4 renumbering — old rounded-sm/rounded map to new -xs/-sm (see Upgrade Guide).
border-collapse: border-collapse (merge adjacent cell borders), border-separate (keep them distinct — required for border-spacing to have any visible effect).
border-spacing (only meaningful with border-separate): border-spacing-<number> (both axes), border-spacing-x-*/border-spacing-y-* (independent), each with -px/(<custom-property>)/[<value>].
Divide (divide-x-*/divide-y-*): applies border-{width} only between direct children (via :not(:last-child), same selector-performance change as space-* in v4 — see Upgrade Guide), sharing the same numeric/color/style suffix grammar as border-*: divide-x-<number>/divide-y-<number> (width), divide-<color> (color), divide-solid/-dashed/-dotted/-double/-hidden/-none (style), plus -reverse variants pairing with reversed flex directions.
Outline (covered in depth alongside outline-color/outline-style here, since it's conceptually a border sibling): outline-<number> (implies outline-style: solid and sets width, no separate outline class needed in v4 — see Upgrade Guide), outline-color-* (full palette), outline-dashed/-dotted/-double, outline-offset-<number> (gap between border and outline), outline-hidden (the accessible "invisible outline" — see Upgrade Guide for why it's not outline-none).
table-layout (table sizing algorithm, closely tied to border-collapse/border-spacing above): table-auto (column widths driven by content), table-fixed (column widths driven by the first row / explicit widths — required for predictable table performance on large datasets).
<div class="rounded-lg border border-gray-200 p-6">...</div>
<ul class="divide-y divide-gray-200">
<li class="py-3">Item</li>
<li class="py-3">Item</li>
</ul>
<button class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500">Save</button>
border with an explicit color (v4 default), divide-y for zero-markup list separators, and the standard focus-visible outline pattern with offset.border/border-x/etc. with an explicit color utility in v4 — the default is currentColor, which silently inherits text color instead of showing a visible gray line.border-spacing only does anything under border-separate — it's a no-op with the (also default) border-collapse.divide-y/divide-x over adding border-b to every child manually — it's automatically last-child-aware.outline-hidden (not outline-none) is the accessible way to visually hide a focus outline while preserving forced-colors-mode visibility — see the Upgrade Guide chapter for the full rationale.border-*/divide-* share the exact direction-prefix grammar with margin/padding.