Borders

Border width, colour, style and radius — plus outlines, rings and dividers, and the default border colour change in v4.

Borders, outlines and rings are three different ways to draw a line around an element. Knowing which to use is most of the battle.

Width#

Default colour#

To restore the v3 default project-wide:

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

That said, being explicit is better — it makes dark mode obvious.

Colour and style#

<div class="border border-gray-200">Solid, 1px</div>
<div class="border-2 border-dashed border-indigo-500">Dashed</div>
<div class="border-t border-b border-gray-200">Top and bottom only</div>
<div class="border border-indigo-500/30">Translucent</div>

Radius#

Per-corner and per-side#

<div class="rounded-t-xl">Top corners</div>
<div class="rounded-tl-xl rounded-br-xl">Diagonal corners</div>
<div class="rounded-s-lg">Logical start side</div>

Nested radii#

An inner element inside a padded rounded box needs a smaller radius to look right:

<div class="rounded-xl border border-gray-200 p-1">
  <div class="rounded-[calc(0.75rem-0.25rem)] bg-gray-100 p-4">…</div>
</div>

The formula is outer radius − padding. With theme variables:

<div class="rounded-[calc(var(--radius-xl)-4px)]">…</div>

Outline#

Outlines are drawn outside the border box and do not affect layout — which makes them ideal for focus indicators.

<div class="flex gap-3 p-4">
  <button class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
    Tab to me
  </button>
  <button class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
    Then me
  </button>
</div>

Rings#

A ring is a box-shadow shaped like an outline. Unlike a real outline it follows border-radius exactly.

<div class="flex flex-wrap gap-4 p-4 text-sm">
  <div class="rounded-lg bg-white px-4 py-3 ring-1 ring-gray-900/10">ring-1 ring-gray-900/10</div>
  <div class="rounded-lg bg-white px-4 py-3 ring-2 ring-indigo-500">ring-2 ring-indigo-500</div>
  <div class="rounded-lg bg-white px-4 py-3 ring-2 ring-indigo-500 ring-offset-2">with ring-offset-2</div>
</div>

Border vs outline vs ring#

Dividers#

divide-* puts borders between children, with none on the last one.

<ul class="mx-auto max-w-sm divide-y divide-gray-200 rounded-lg border border-gray-200 text-sm">
  <li class="px-4 py-3 text-gray-700">Inbox</li>
  <li class="px-4 py-3 text-gray-700">Drafts</li>
  <li class="px-4 py-3 text-gray-700">Sent</li>
</ul>

Common patterns#

Card#

<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">…</div>

Input with a focus ring#

<input class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none" />

Button group#

<div class="inline-flex rounded-lg border border-gray-300 p-4 text-sm shadow-sm">
  <button class="rounded-l-md border-r border-gray-300 bg-white px-3 py-1.5 font-medium text-gray-700 hover:bg-gray-50">Day</button>
  <button class="border-r border-gray-300 bg-white px-3 py-1.5 font-medium text-gray-700 hover:bg-gray-50">Week</button>
  <button class="rounded-r-md bg-white px-3 py-1.5 font-medium text-gray-700 hover:bg-gray-50">Month</button>
</div>

Selected state without layout shift#

<label class="rounded-lg border border-gray-300 p-4 has-checked:border-indigo-500 has-checked:ring-1 has-checked:ring-indigo-500">
  <input type="radio" name="plan" class="accent-indigo-600" /> Pro
</label>

Common mistakes#

• Relying on the v3 default border colour. border alone is currentColor in v4.
• border-2 on hover. Causes a 1px layout jump. Use a ring, or set the border width in both states.
• outline-none with no replacement. Breaks keyboard navigation. Use outline-hidden plus a visible ring.
• Rounded parent without overflow-hidden. Child images poke through the corners.
• Forgetting the dark-mode border. border-gray-200 glows on a dark surface.
• Expecting divide-* to work on a flex container with gap. It works, but the gap and the divider fight; pick one.

Related topics#

• Shadows — rings and elevation
• Colors — border colour and opacity
• Forms — focus and validation styling
• Deprecated APIs — the full list of renames