# Analyze Border Radii and Shadows from a Live Website

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

Last updated: 2026-08-25

The fastest way to analyze border radii and shadows is to compare the same component types across a page, record what repeats, and separate visible evidence from assumptions. Start with buttons, inputs, cards, panels, menus, dialogs, images, and tooltips. For each one, note the corner shape, border, shadow position, softness, and background behind it.

## Start with repeated components

Use a consistent checklist:

1. **Buttons and controls:** Decide whether corners are square, gently rounded, pill-shaped, or mixed by size and purpose.
2. **Cards and panels:** Check the outer radius, then compare nested sections. A nested panel may use a smaller radius to preserve the visual hierarchy.
3. **Inputs and menus:** Compare text fields, dropdowns, search boxes, tooltips, and command menus. These often reveal whether the interface uses one shape or several tiers.
4. **Images and media:** Check whether images follow the card radius, use a separate crop radius, or remain square inside a rounded frame.
5. **Floating elements:** Inspect popovers, dialogs, and sticky surfaces separately because they may use larger corners and stronger separation.

Record approximate values only when the page makes them reasonably clear. Otherwise use labels such as tight, medium, large, or pill. Do not turn a visual estimate into an official CSS value.

The supplied Linear captures are useful comparison references. Their notes describe a near-black canvas, muted dividers, compact controls, and one cool accent. The supplied typography evidence identifies Inter across body copy, labels, headings, and controls. Use those observations to ask whether the surface treatment is restrained and consistent, but do not infer private design-system rules from the captures.

## Captured pages

[![The system for product development](https://pin.fontofweb.com/6434?format=jpg)](https://design.withfudge.com/share/pin-6434)

[The system for product development](https://design.withfudge.com/share/pin-6434)

[![Plan and build products](https://pin.fontofweb.com/6435?format=jpg)](https://design.withfudge.com/share/pin-6435)

[Plan and build products](https://design.withfudge.com/share/pin-6435)

## Linear typography

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

## Read shadows in context

A shadow has several observable parts:

- **Offset:** Does it sit beneath the object, or spread almost evenly around it?
- **Blur:** Is the edge tight and close, or broad and detached?
- **Opacity:** Does it gently separate surfaces, or create obvious elevation?
- **Contact edge:** Is there a crisp edge, a soft halo, a border, or a combination?
- **Background:** Does the same shadow remain visible on light and dark surfaces?

Group the results into practical levels such as surface separation, raised layer, and overlay elevation. Then compare radius and elevation together. Larger corners and softer shadows often appear on elements farther above the page, but that relationship must be checked rather than assumed. On dark interfaces, a muted divider or surface-color shift may provide more separation than a shadow.

## Turn observations into tokens

Create a table before writing CSS:

| Token | Use | Radius | Shadow |
|---|---|---:|---|
| `surface-sm` | Inputs and compact controls | tight | none or subtle |
| `surface-md` | Cards and panels | medium | soft separation |
| `surface-lg` | Menus and dialogs | large | raised layer |
| `surface-pill` | Tags and status controls | full | usually none |

Mark each row as repeated, component-specific, or uncertain. Keep nested corners, clipped images, focus rings, hover states, and mobile layouts in the review. The final handoff should identify repeated patterns, one-off details, and the states that still need manual checking.

## Use this in your AI agent

> Analyze the captured website's border radii and shadows by component. Compare buttons, inputs, cards, panels, menus, dialogs, images, and floating elements. Return observed radius groups, border treatment, shadow offset, blur, opacity, and likely usage. Separate repeated patterns from one-off details, note viewport or state differences, and finish with cautious CSS variables that I can verify manually.

[Install Fudge for your AI agent](/mcp) to review saved website references and create this design handoff.

---

Use the same worksheet for every page. Put components in rows and pages in columns, then record radius, border, shadow level, background, and state. Use relative labels first: none, subtle, medium, or strong for shadows, and tight, medium, large, or pill for radii.

Mark each result as unchanged, responsive, state-specific, or uncertain. A mobile card that changes shape may reflect a layout adjustment rather than a new shared token. A dialog shadow that appears only when open belongs to the overlay category, not the ordinary card category.

After comparing pages, look for relationships. Nested panels may use smaller corners than their parent. Menus may use larger corners and softer shadows. Only convert repeated observations into shared CSS variables. Keep page-specific variations visible so a developer does not mistake an estimate for a confirmed rule.

---

Start with a small, adjustable set of variables:

```css
:root {
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-overlay: 16px;
  --radius-pill: 999px;
  --shadow-surface: 0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.14);
  --shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.20);
}
```

These are starting points, not extracted facts. Replace them only when your observations show repetition. Use the control radius for inputs and compact buttons, the card radius for ordinary panels, and the overlay radius for menus or dialogs. Keep pills separate because their shape communicates a different control type.

For dark interfaces, combine a subtle shadow with a muted border or small surface-color change when the shadow is hard to see. Test focus rings, nested corners, clipped images, hover states, and narrow widths before treating the token set as finished.

## Related questions

- [Analyze Color Roles from a Live Website](/share/analyze-color-roles-from-a-live-website)
- [Website Design Analyzer for Typography Hierarchy](/share/website-design-analyzer-for-typography-hierarchy)
- [Analyze Component Styles from a Live Website](/share/analyze-component-styles-from-a-live-website)
- [Website Design Analyzer for Spacing Scale](/share/website-design-analyzer-for-spacing-scale)