Borders, Shadows and Backgrounds

Depth, edges and colour fields are what make a flat layout feel like an object you could pick up. This chapter of the Tailwind CSS for Beginners series covers border widths and colours, the radius scale, the shadow family (including the v4 renames), and background utilities from flat tints to gradients and images. The design theory behind these choices sits alongside Backgrounds, Borders & Shadows.

Borders

A border is three decisions: width, colour and — for corners — radius. Tailwind splits them into separate utilities so you can change one without restating the others:

• Width — border (1px), border-2, border-4, border-t for a single edge, and border-0 to remove.
• Colour — border-slate-200, border-t-indigo-500 for one edge. In v4 an uncoloured border inherits currentColor, so always name the colour.
• Style — border-dashed and border-dotted for callouts and drop zones.
• Radius — covered next, from rounded-xs to rounded-full.

The radius scale

The names shifted in v4: the old rounded-sm is now rounded-xs, and the old bare rounded is now rounded-sm. The bare form still compiles for compatibility, but it now means the small value — so upgrading a v3 project means re-checking every radius. A square element with rounded-full renders as a circle, the standard avatar trick.

Shadows and rings

Shadows are how interfaces communicate elevation. Tailwind ships a named family, and it carries the same v4 rename the radius scale got:

<div class="rounded-xl bg-white p-5 shadow-xs">Barely lifted</div>
<div class="rounded-xl bg-white p-5 shadow-md">A working card</div>
<div class="rounded-xl bg-white p-5 shadow-xl">Floating, modal-like</div>

Expected output:

Three white cards, each with a larger, softer shadow than the
last — barely lifted, comfortably raised, then floating.

Adding ring-1 ring-slate-900/5 to any of them draws a barely visible hairline that keeps the edge crisp on light backgrounds. Three related utilities cover other cases: inset-shadow-md pushes a shadow inside (useful for pressed states), drop-shadow-lg follows the shape of non-rectangular content such as cut-out images, and ring-* draws an outline-style halo that is perfect for focus, as you saw in the previous chapter. Arbitrary values like shadow-[0_20px_50px_rgba(0,0,0,0.25)] are available when the scale does not reach.

Backgrounds: colour, gradient, image

bg- handles flat colour first, then gradients and images when you need them. Gradients read left to right as stops, and v4 renamed the direction utilities to say linear explicitly:

<div class="h-32 bg-linear-to-br from-indigo-500 via-sky-400 to-emerald-400"></div>
<div class="h-32 bg-[url('/img/hero.jpg')] bg-cover bg-center"></div>
<div class="h-32 bg-indigo-500/10 bg-blend-multiply"></div>

Expected output:

Three bands of equal height: a smooth diagonal wash from indigo
through sky to green, a photograph that fills its box and crops
rather than distorts, and a pale indigo tint.

The full gradient shorthand is bg-linear-to-r in v4 — the older bg-gradient-to-r still compiles, but the new name is what the documentation uses. For images, bg-cover fills and crops while bg-contain fits the whole picture inside; bg-no-repeat and bg-center finish the job. When text sits on a photo, add a translucent overlay such as bg-slate-900/60 so contrast survives.

Putting a surface together

A convincing card combines just a few of these decisions, applied in a consistent order — edge, elevation, surface, then content:

<article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-md
                 transition hover:-translate-y-1 hover:shadow-lg">
  <span class="inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700">Stable</span>
  <h3 class="mt-3 text-lg font-bold text-slate-900">Release 4.2</h3>
  <p class="mt-1 text-sm leading-6 text-slate-600">Faster builds, sharper shadows, calmer borders.</p>
</article>

Expected output:

A white card with generous rounding and a medium shadow. A small
green pill label sits above a bold title and two lines of grey copy.
Hovering lifts the card and spreads the shadow wider.

Overlays, blends and translucency

Many modern surfaces are partly transparent, and three utility families make that routine. Opacity on a colour (bg-white/70) keeps a background airy; blend modes such as bg-blend-multiply tell a background image how to mix with the colour beneath it; and a backdrop filter blurs whatever sits behind the layer — together producing frosted-glass panels:

<div class="rounded-xl bg-slate-900/70 p-4 text-white backdrop-blur-md ring-1 ring-white/20">
  Frosted overlay content
</div>

Expected output:

A dark, semi-transparent panel with softened detail showing through
it, a faint light outline, and text that stays readable.

The rule that keeps these honest is contrast: a translucent panel over a busy photo needs both darkening and blur. The same applies to text over imagery, where a scrim layer is cheaper than hoping the image cooperates.

Common mistakes

• Borders without colour — in v4 they take the text colour, which is rarely what you meant.
• Shadows on transparent surfaces — a shadow needs something to sit against; translucent cards read best with a hairline border too.
• Assuming old radius names — v3's rounded-sm and v4's are different sizes, so upgrades need a visual pass.
• Text over photos with no overlay — a busy image destroys contrast; scrim it with a dark translucent layer.
• Decorating without a system — mixing five radii and four shadows on one page breaks the illusion of a single design.

Practice checklist

1. Build three cards using only shadow-xs, shadow-md and shadow-xl and compare the implied depth.
2. Give an avatar size-16 rounded-full object-cover and confirm it renders as a circle.
3. Create a hero with a gradient, then add a dark overlay and white text on top.
4. Restyle one card with a dashed border and a badge using rounded-full.

By now you will have noticed repetition across your markup — the next chapter removes it: Reusable Components and @apply.