# Shadows, borders and corners

> Lift surfaces with shadows that whisper, separate them with borders, nest rounded corners correctly, and trust your eye over the ruler.

Module: Color, depth and surfaces · Level: beginner · 8 min · https://school.agents.org.in/design/surface/shadows-and-corners

Four ways to lift the same card. Start on "The default", then try "Whisper".

*[Interactive demo: The heavy one announces. The whisper you feel without seeing.]*

`0 2px 8px rgba(0, 0, 0, 0.1)` is the most copied shadow on the web. Nothing is wrong with it except that it is everywhere, so it reads as "template".

## Shadows should whisper

A shadow's job is to hint that a surface floats, which designers call elevation (How far a surface seems to float above the page: a card a little, a menu more, a dialog most. Shown with shadows in light mode and lighter surfaces in dark mode). If you can clearly *see* a soft gray blur, it's too strong.

The fix is a layered shadow (Several faint shadows stacked in one box-shadow: a tight one, a wide soft one, sometimes a 1px ring. It reads as real depth where one blurry shadow reads as a template): several faint shadows stacked in one declaration.

```css
--shadow-md:
  0 1px 2px  rgba(17, 17, 17, 0.05),
  0 4px 8px  rgba(17, 17, 17, 0.05),
  0 8px 24px rgba(17, 17, 17, 0.04);
```

What makes it work:

- **Several layers** at different blurs (2px, 8px, 24px) read as physical depth. One big blur looks flat.
- **Opacity at 4–6%, not 10%.** This is the part most people get wrong.
- **A near-black base** like `#111`, not pure black.
- **The y-offset never bigger than the blur.**

Build at least three, for three heights: cards (+1), dropdowns and popovers (+2), dialogs (+3).

## Shadows raise; borders separate

Pick by the job the line is doing.

- **Raised** things (cards, menus, popovers, dialogs) get a shadow. Because a shadow is see-through, one token works over any background.
- **Separated** things (table rows, list dividers, input edges) keep a border. A visible input edge is an accessibility feature.

**The rule is about elevation, not every line.** An agent that reads "use shadows instead of borders" and strips the edges off inputs and table cells has made the UI worse. And use **one depth cue per surface**: border plus shadow plus ring plus gradient on one card is hedging.

A few finishing lines from Emil Kowalski's practice:

- **Hairlines (The thinnest possible line: 1px, or 0.5px on high-density screens. Used for dividers and the outline around images)** at 0.5px on high-density screens, 1px elsewhere. Retina dividers at 1px look heavy.
- **Every image gets a 1px inset outline** in pure black (or white in dark) at 10%. A tinted gray picks up the background and looks like grime.
- **Fade with `mask-image`**, not a gradient laid on top, and never fade content people are scrolling toward.

## Corners: a scale, and the nesting rule

Border radius (How rounded a box's corners are, in pixels. A system uses a few deliberate sizes, not the same radius on everything) is a personality dial. The same radius on everything is lazy; a small scale used on purpose looks crafted.

```css
--radius-sm: 4px;   /* badges */
--radius-md: 8px;   /* inputs, small buttons */
--radius-lg: 12px;  /* cards */
--radius-xl: 16px;  /* modals */
--radius-full: 9999px; /* pills, avatars */
```

Mixing far-apart sizes (4px badges in a 16px modal) is fine. Mixing near ones (4px and 8px side by side) looks like a mistake. And if a button is a pill, everything inside it commits to the pill too.

Now the rule people miss most. When a rounded box sits inside another, the inner radius isn't the same as the outer one. It's smaller, by the gap:

**inner radius = outer radius − padding**

*[Interactive demo: Turn the rule off and watch the corners pinch. Past about 24px of gap, the two surfaces read as separate.]*

With equal radii, the gap between the two curves gets thinner at each corner and the inner box seems to bulge. With the subtraction, the curves run parallel. *(Copying the parent's radius is the single most frequent giveaway of an unpolished UI.)*

## Trust your eye over the ruler

Perfect math sometimes looks wrong. A triangle centered by its bounding box looks shoved left, because most of its box is empty. A circle the same height as a square looks smaller, because it doesn't fill its corners.

*[Interactive demo: Mathematical versus optical. The guides show the math; the right-hand version is what designers ship.]*

The fix is optical alignment (Nudging things until they look aligned to the eye, even when the measurements say they were already aligned. A play triangle moves a little right; a circle grows a little): nudge until it *looks* right. The play glyph moves a pixel or two right; the circle grows about 5%. If it looks wrong, it is wrong.

The same idea, a little imperfection on purpose, extends further on marketing pages: a faint paper-grain texture instead of a flat fill, a hand-drawn stroke, an asymmetric layout that feels composed. Keep it there. Inside the product (forms, tables, settings) consistency wins, and "imperfect" just means "broken".

**Fix shadows and corners (paste into your agent):**

```text
Review the surfaces in this component:
- Replace any single-blur box-shadow with our layered tokens (--shadow-sm/md/lg: 2–3 layers, 4–6% opacity, base #111, y-offset ≤ blur).
- Shadows only on raised surfaces (cards, menus, dialogs). Keep borders on inputs, table cells and dividers.
- One depth cue per surface.
- Nested rounded elements: inner radius = outer radius − padding.
- Images get outline: 1px solid rgb(0 0 0 / .1) with outline-offset: -1px.
Return a Before | After | Why table.
```

**Check yourself:** A dialog has border-radius 16px and padding 6px. What radius should the panel inside it get?

- [ ] 16px, to match
- [x] 10px
- [ ] 22px
- [ ] 6px

*Why:* Inner radius = outer − padding: 16 − 6 = 10px. Equal radii pinch the gap at every corner.

## In the skill

- https://school.agents.org.in/skill/surface/shadows-whisper.md
- https://school.agents.org.in/skill/surface/depth-and-nesting.md
- https://school.agents.org.in/skill/surface/border-radius.md
- https://school.agents.org.in/skill/surface/visual-imperfection.md