Create a card with a gradient border

Approach

Wrap the card in an element with a gradient background and a little padding; the inner card's background covers the middle, leaving the gradient visible as a border.

Solution

<div class="p-8">
  <div class="max-w-sm rounded-2xl bg-linear-to-r from-fuchsia-500 via-violet-500 to-cyan-500 p-0.5">
    <div class="rounded-[calc(var(--radius-2xl)-2px)] bg-white p-6">
      <p class="font-semibold">Gradient border</p>
      <p class="mt-1 text-sm text-slate-600">A 2px gradient around a solid card.</p>
    </div>
  </div>
</div>

Pitfalls

• Mismatched corner radii; subtract the border width from the inner radius as shown.

Variations

• Animate the gradient angle with a custom @utility and @property for a glowing effect.

Further reading: Tailwind CSS docs