Borders, Rounded Corners, and Shadows

Visual Depth and Boundaries

Borders

• border — 1 px border using currentColor.
• border-{n} — border width: border-2, border-4, border-8.
• border-sky-400 — border color.
• border-t, border-r, border-b, border-l — individual sides.
• border-dashed, border-dotted, border-solid, border-none — style.
• divide-y-{n} — add borders between stacked children.

Rounded Corners

• rounded (0.25 rem), rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full.
• rounded-t-xl, rounded-bl-lg — per-corner and per-side variants.

Shadows

• shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl — elevation.
• shadow-none — remove shadow.
• shadow-sky-400/30 — colored shadow with opacity.
• ring-2 ring-sky-500 — focus-style outline ring.

<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-md hover:shadow-xl transition-shadow duration-300">
  Elevated card
</div>