# How to Check Border Radii and Shadows on Any Website

[Open the live Fudge conversation](https://design.withfudge.com/share/how-to-check-border-radii-and-shadows-on-any-website)

Last updated: 2026-08-25

To check border radii and shadows on any website, inspect the captured page's components and record each card, button, input, panel, and image treatment by location and role. Then compare repeated values across components instead of copying one corner or shadow in isolation.

## Start with a component checklist

Review the page in this order:

1. Cards and panels
2. Buttons and controls
3. Inputs and menus
4. Images, avatars, and media frames
5. Floating elements and overlays
6. Section containers and large backgrounds

For every item, record the approximate corner radius, border presence, border color, shadow direction, blur, spread, opacity, and whether the treatment changes on hover or focus. Also note the component size. A 4px radius on a small control may feel very different from the same radius on a large card.

The examples below include two captured Linear pages. Both are described as using a near-black canvas, muted dividers, compact controls, and one cool accent. They also show Inter in regular and medium weights. Use them as references for comparing repeated treatment across pages, not as proof of a universal Linear design rule.

## 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.

## Compare radius patterns

Create a small table while reviewing:

| Element | Radius | Border | What to compare |
|---|---:|---|---|
| Small control | Approximate value | None or subtle | Does it feel crisp or pill-like? |
| Button | Approximate value | Accent or muted | Does the radius match inputs? |
| Card | Approximate value | Often subtle | Does it match the panel system? |
| Image | Approximate value | Optional | Does it follow the card or stand apart? |
| Modal or overlay | Approximate value | Usually quiet | Does it use the largest radius? |

Look for a pattern rather than a single number. Some sites use one radius for most components. Others use a small radius for controls, a medium radius for cards, and a larger radius for prominent surfaces. The useful finding is the relationship between those choices.

Check whether corners are actually rounded or whether the appearance comes from clipping, a masked image, a border, or a shadow that softens the edge. A screenshot can make these treatments look similar, but the implementation choice affects how the component behaves at different sizes.

## Read shadows as a system

A shadow review should answer four questions:

- Is the shadow visible on the page background?
- Does it lift the component, outline it, or create a glow?
- Is the shadow neutral, warm, cool, or tinted by an accent color?
- Does it appear on all surfaces or only on floating elements?

For dark pages, a black shadow may disappear. Separation may instead come from a lighter surface, a muted divider, a soft colored glow, or a subtle change in brightness. For light pages, a heavy gray shadow can make cards look detached from the rest of the layout. Record the contrast between the surface and its surroundings before deciding that a stronger shadow is needed.

Review shadow states too. A button may have no visible shadow at rest but gain one on hover. A menu may use a soft wide shadow while a card uses only a border. Those differences often communicate hierarchy more clearly than the radius alone.

## Include spacing and type in the comparison

Radii and shadows rarely explain the whole look. Record the gap inside cards, the distance between controls, divider placement, and heading-to-body spacing. Also check the font family, weight, size, and line height. The supplied Linear typography example uses Inter at weights 400 and 500, with contrast coming from size, weight, and muted color. That is a useful reminder that a compact interface can feel polished without relying on dramatic shadows.

Ask for a component-by-component report, then test the findings against several sections of the page. If the same radius and shadow appear on navigation, cards, and dialogs, they may be part of a repeated visual rule. If they appear once, label the observation as local rather than treating it as a site-wide standard.

## Use this in your AI agent

> Inspect the captured website's border radii and shadows. Review cards, buttons, inputs, menus, media, overlays, and section containers. Return a table with approximate radius, border, shadow role, color character, blur or softness, and location for each component. Compare repeated values across sections, include spacing and typography context, and clearly separate observed page details from suggested CSS tokens.

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

---

Use the same checklist for every page and keep the categories fixed: small controls, buttons, cards, inputs, media, overlays, and large surfaces. Ask for one row per component with radius, border, shadow role, approximate softness, and location.

Then compare relationships rather than isolated values:

- Do buttons and inputs share a radius?
- Are cards more rounded than controls?
- Are shadows used for every surface or only floating layers?
- Does the page rely on borders instead of shadows?
- Does the treatment stay consistent between the homepage and product pages?

For a dark interface, specifically ask whether separation comes from shadow, surface brightness, divider color, or a cool glow. For each difference, label it as repeated, page-specific, or unclear. This gives you a reliable shortlist of patterns to test without assuming that every captured detail belongs to one official design system.

---

Translate observations into a small set of tokens only after grouping similar values. A starting structure might look like this:

```css
:root {
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-overlay: 16px;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 0.12);
  --shadow-overlay: 0 20px 48px rgb(0 0 0 / 0.22);
}

.card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.menu {
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
}
```

Treat these as working recommendations, not confirmed internal values. Test them on small controls, cards, and overlays at the same size as the reference. If a dark page uses muted surfaces or cool accents instead of obvious shadows, preserve that contrast method rather than adding a large generic black shadow. Check hover, focus, and responsive states separately because the treatment may change with interaction or viewport.

## Related questions

- [How to Check Color Roles on Any Website](/share/how-to-check-color-roles-on-any-website)
- [Give Claude Code a Website's Typography Hierarchy](/share/give-claude-code-a-website-s-typography-hierarchy)
- [How to Check Component Styles on Any Website](/share/how-to-check-component-styles-on-any-website)
- [Give Claude Code a Website's Spacing Scale](/share/give-claude-code-a-website-s-spacing-scale)