Borders, rounded corners and shadows turn a rectangle into a card, an input or a button. Tailwind provides a compact scale for each, and v4 adds inset shadows and a one-pixel default ring. In this lesson you will learn how to draw borders on any side, round corners consistently, add elevation with shadows, and build accessible focus rings that do not shift layout.
border on its own draws a 1px solid border on every side; add a number for thicker lines and a side suffix to limit it:
<div class="border border-gray-300">All sides, 1px</div>
<div class="border-2 border-t-4 border-blue-600">2px, thicker top</div>
<div class="border-b border-dashed border-gray-400">Dashed bottom rule</div>
<div class="border-x-0 border-y">Only top and bottom</div>Available widths are 0, 2, 4 and 8 (plus arbitrary values such as border-[3px]). Styles are border-solid, border-dashed, border-dotted, border-double, border-hidden and border-none. Colors use the full palette with the opacity modifier: border-black/10.
Remember that in v4 the default border color is currentColor. A card with dark text and a bare border will get a dark border, so always name a color for light dividers.
For lists and table rows use divide-*, which adds a border between children without a stray line at the end:
<ul class="divide-y divide-gray-200">
<li class="py-3">First</li>
<li class="py-3">Second</li>
</ul>The radius scale grew in v4 and shifted names by one step, so the smallest values are worth memorising:
| Class | Radius |
|---|---|
| rounded-xs | 0.125rem |
| rounded-sm | 0.25rem |
| rounded-md | 0.375rem |
| rounded-lg | 0.5rem |
| rounded-xl | 0.75rem |
| rounded-2xl / 3xl / 4xl | 1rem / 1.5rem / 2rem |
| rounded-full | 9999px (pills, avatars) |
Corners can be targeted individually: rounded-t-lg, rounded-r-none, rounded-tl-2xl, and logically with rounded-s-lg (start side), which is how button groups round only their outer corners.
Shadows communicate elevation. The scale runs from shadow-2xs to shadow-2xl, with shadow-sm and shadow-md covering most cards:
<div class="shadow-sm">Resting card</div>
<div class="shadow-lg hover:shadow-xl transition-shadow">Lifts on hover</div>
<div class="shadow-lg shadow-blue-500/30">Tinted glow</div>
<div class="inset-shadow-sm">Pressed-in surface</div>shadow-<color> tints the shadow, which looks far better than grey on colored buttons. inset-shadow-* (new in v4) draws an inner shadow and can be combined with a normal shadow-*. drop-shadow-* is the filter-based alternative that follows the shape of transparent PNGs and SVGs. shadow-none removes a shadow at a breakpoint or state.
A ring is a box shadow drawn outside the element. Because it is not a border, adding one on focus never changes the element's size or shifts neighbouring content:
<button class="rounded-md bg-blue-600 px-4 py-2 text-white
focus-visible:outline-hidden focus-visible:ring-2
focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Save
</button>In v4 a bare ring is 1px wide and uses currentColor; use ring-2, ring-3 or ring-4 for visible focus states. ring-offset-2 inserts a gap between the element and the ring (with ring-offset-<color> for non-white backgrounds), and inset-ring draws the ring inside the element.
Outlines are the native alternative: outline-2 outline-offset-2 outline-blue-500. outline-hidden hides the browser default while keeping an outline in forced-colors mode; outline-none removes it completely.
shadow became shadow-sm, shadow-sm became shadow-xs, rounded became rounded-sm, ring shrank to 1px.border-b on the last list item, which leaves a trailing line; divide-y avoids it.:focus instead of a ring, which makes the element jump by one or two pixels.Why is a `ring` preferred over a `border` for focus styles?
border, border-<n>, side suffixes and divide-* cover every dividing-line need; always name a border color in v4.rounded-xs and ends at rounded-4xl, with per-corner and logical variants.shadow-sm/shadow-md for cards, tinted shadow-<color> on colored elements, and inset-shadow-* for pressed states.ring-2, ring-offset-2) are layout-safe focus indicators; pair them with outline-hidden.shadow, rounded, ring), so check them when upgrading.Next lesson: Backgrounds, Gradients and Images — apply background images, size and position them, and build linear, radial and conic gradients.