Borders, Shadows, and Effects

Borders and shadows are where Tailwind's utilities start composing into genuinely reusable visual patterns — a card, a divider, an input's focus ring — built entirely from small independent pieces.

Border width, style, and color

<div class="border border-slate-200">Default 1px border, all sides</div>
<div class="border-b border-slate-200">Bottom border only</div>
<div class="border-2 border-dashed border-amber-400">Thicker dashed border</div>

border alone gives a 1px solid border using the current text color, which is rarely what you want — in practice you almost always pair it with a border-{color} utility. border-b, border-t, border-x, and border-y scope the border to specific sides, the same directional pattern used by padding and margin. border-2, border-4, etc. change the width, and border-dashed/border-dotted change the style.

Border radius

<img class="rounded-full h-10 w-10" src="/avatar.jpg" alt="" />
<div class="rounded-lg">Card with moderately rounded corners</div>
<div class="rounded-t-xl">Only the top corners are rounded</div>

rounded-full on a square element (equal width and height) produces a perfect circle — the standard pattern for avatars. Like borders, radius can be scoped to specific corners (rounded-t-*, rounded-bl-*) when only part of an element should be rounded, such as the top of a card that sits flush against a full-bleed image.

Box shadows

<div class="rounded-lg bg-white p-6 shadow-sm">Subtle elevation</div>
<div class="rounded-lg bg-white p-6 shadow-lg">More pronounced elevation</div>
<div class="rounded-lg bg-white p-6 shadow-xl shadow-blue-500/20">Colored shadow</div>

Tailwind's shadow scale (shadow-sm through shadow-2xl) gives you a handful of consistent elevation levels instead of hand-tuned box-shadow values scattered across a project — useful because shadow depth is one of those details that's very easy to make subtly inconsistent by eye. The color-and-opacity modifier (shadow-blue-500/20) tints the shadow itself, which reads as a soft glow rather than a plain drop shadow — a common touch on featured cards or focused elements.

Rings, an alternative to borders

<button class="rounded-md px-4 py-2 ring-1 ring-slate-300 focus:ring-2 focus:ring-blue-500 focus:outline-none">
  Continue
</button>

A ring is a box-shadow-based outline that doesn't affect layout the way a border does (borders add to an element's rendered size unless you also set box-sizing). Rings are the standard way to build focus indicators in Tailwind — notice ring-1 sets a thin default ring, and focus:ring-2 thickens and recolors it only while the button is focused, without the button's size shifting on focus the way a border-width change would.

Opacity and blend effects

<img class="opacity-75 grayscale hover:opacity-100 hover:grayscale-0" src="/photo.jpg" alt="" />

opacity-* fades an entire element (including its children), while grayscale desaturates it — a common pairing for a photo gallery where inactive images look muted until hovered. Because these are ordinary utilities, they combine with the state variants covered in the next section without any extra setup.