# Give Claude Code a Website's Border Radii and Shadows

[Open the live Fudge conversation](https://design.withfudge.com/share/give-claude-code-a-website-s-border-radii-and-shadows)

Last updated: 2026-08-25

To give Claude Code a website's border radii and shadows, first collect the values from repeated components, then describe where each value is used and how strong it looks. The useful result is a small, verified style table plus implementation guidance, not a claim that you recovered the site's private design values.

## Start with repeated components

Check the same kinds of elements across the page:

- Cards and panels
- Buttons and inputs
- Menus, popovers, and dialogs
- Images and media frames
- Navigation containers
- Large hero or feature sections

For each element, record the visible corner shape, approximate radius, border treatment, shadow layers, opacity, blur, spread, and whether the style changes on hover or focus. Repetition matters more than one unusual illustration. If most cards share one radius and a hero uses a larger one, keep those as separate roles.

A practical observation table looks like this:

| Component | Radius | Border | Shadow | State or context |
|---|---:|---|---|---|
| Small control | 6px | 1px subtle border | None or very light | Buttons and inputs |
| Card | 12px | Optional | Soft low spread | Repeated content blocks |
| Dialog | 16px | Optional | Larger blur and offset | Floating surface |
| Media frame | Verify | Often none | Depends on contrast | Images and previews |

The examples below include captured references for Notion Developer Platform, Claude Code, and Exa MCP Server. Open them to compare how different page structures use containers, media frames, and floating surfaces. They are references for pattern comparison, not evidence that every listed page uses the same radius or shadow values.

## Captured pages

[![Notion Developer Platform](https://pin.fontofweb.com/9283?format=jpg)](https://design.withfudge.com/share/pin-9283)

[Notion Developer Platform](https://design.withfudge.com/share/pin-9283)

[![Claude Code](https://pin.fontofweb.com/1446?format=jpg)](https://design.withfudge.com/share/pin-1446)

[Claude Code](https://design.withfudge.com/share/pin-1446)

[![Exa MCP Server](https://pin.fontofweb.com/6429?format=jpg)](https://design.withfudge.com/share/pin-6429)

[Exa MCP Server](https://design.withfudge.com/share/pin-6429)

## Linear typography

- **Inter** — weight 400 · Body copy, labels, navigation, and controls.
- **Inter** — weight 500 · Headings and emphasized interface text.

## Explain the visual job of each value

A radius is not only a number. It changes how related two surfaces feel. Smaller radii make controls feel compact and precise. Larger radii make cards, media, and promotional sections feel softer or more spacious. Use one family of values when the page needs a disciplined interface, then reserve larger values for clear hierarchy.

Shadows also need a role. A low, wide shadow can separate a card from a slightly tinted background without making it appear lifted. A tighter, darker shadow can signal a menu or dialog above the page. If every surface has a strong shadow, the hierarchy disappears. Record whether the separation comes from shadow, border, contrast, or a combination.

## Give Claude Code implementation-ready guidance

Ask for values first, then component rules. For example:

```css
:root {
  --radius-control: 0.375rem;
  --radius-card: 0.75rem;
  --radius-floating: 1rem;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 0.08);
  --shadow-floating: 0 18px 48px rgb(0 0 0 / 0.14);
}
```

These values are a starting format, not measurements from the references. Replace them with the values you actually observe. Tell Claude Code which components use each value, which states change it, and which surfaces should stay flat. Also ask it to preserve the existing spacing and contrast instead of applying a radius or shadow globally.

## Verify before you reuse

Review at least one compact control, one repeated card, and one floating surface. Compare light and dark backgrounds if the page supports them. Check clipping at the corners, shadow visibility near the viewport edge, and focus states for controls. If the result feels too soft, reduce radius or shadow strength before changing unrelated colors. If it feels flat, add separation selectively rather than adding a heavy shadow to every element.

Extracted details describe what was visible in a captured page. They do not automatically establish an official internal design system, nor do they settle licensing or ownership questions. Keep the source page and your observations together so another person can verify the decisions.

## Use this in your AI agent

> Inspect the captured website references and extract the observed border radii and shadows from repeated controls, cards, media frames, navigation surfaces, menus, and dialogs. Return a table with component, approximate radius, border treatment, shadow layers, and state or context. Separate verified observations from values that need checking. Then write CSS variables and component-specific guidance for Claude Code, preserving the page's existing spacing and contrast. Compare the Notion Developer Platform, Claude Code, and Exa MCP Server examples as visual references, without claiming that their private design values are known.

[Install Fudge for your AI agent](/mcp)

---

Compare the edge in three places: against a light background, against a similarly colored surface, and near another object. A border usually stays tight to the component edge and has a consistent thickness. A shadow fades outward, often changes with the background, and may be visible below or beside the component without creating a hard line.

Ask an AI agent to inspect the same component at several edges and report whether the separation is sharp or blurred. It should also check for multiple shadow layers, because a faint ambient shadow plus a tighter contact shadow can look like a single soft edge. Look at the CSS if it is available, but treat computed styles and the visible result separately. A declared shadow may be hidden by clipping, low opacity, or a different surface behind it.

For implementation, preserve the role. Use a border when the component must remain clearly outlined at every size. Use a shadow when it needs to sit above the page. Use both only when the reference clearly shows both and the combination improves hierarchy.

---

Use a small scale with named roles instead of giving every component a custom shadow. Three levels are usually enough to start: a subtle separation for cards, a stronger elevation for menus or popovers, and a deep elevation for dialogs or prominent overlays.

```css
:root {
  --shadow-none: 0 0 transparent;
  --shadow-subtle: 0 2px 10px rgb(0 0 0 / 0.06);
  --shadow-elevated: 0 10px 28px rgb(0 0 0 / 0.10);
  --shadow-overlay: 0 20px 56px rgb(0 0 0 / 0.16);
}
```

Treat those values as a structure to adapt, not a universal answer. Measure the captured page and adjust offset, blur, spread, and opacity together. A dark interface may need a lighter surface edge instead of a black shadow. A colorful background may need a neutral shadow with lower opacity. Test the scale with keyboard focus, reduced motion settings, and content near the viewport edge. The goal is a clear stacking order: flat content, raised surfaces, and temporary overlays should each be easy to distinguish.

## Related questions

- [Give Claude Code a Website's Color Roles](/share/give-claude-code-a-website-s-color-roles)
- [How to analyze typography hierarchy from a live website](/share/analyze-typography-hierarchy-from-a-live-website)
- [Give Claude Code a Website's Component Styles](/share/give-claude-code-a-website-s-component-styles)
- [How to Analyze a Website Spacing Scale](/share/analyze-spacing-scale-from-a-live-website)