# Get the Border Radius Scale from a Live Website

[Open the live Fudge conversation](https://design.withfudge.com/share/get-the-border-radius-scale-from-a-live-website)

Last updated: 2026-08-25

The reliable way to get a border radius scale from a live website is to inspect repeated components across several pages and states, then group recurring values by role. One card or button is not enough to establish a scale.

## Start with representative pages

Review at least three page types:

1. A homepage or marketing page with cards, buttons, and media.
2. A content-heavy page with lists, tables, or article surfaces.
3. An interaction-heavy page with forms, menus, dialogs, or selected states.

For each page, record the component, viewport, state, visible radius, and whether the value belongs to the outer component or an inner element. Include buttons, inputs, cards, dialogs, badges, avatars, images, and large sections.

A useful worksheet is:

| Component | Observed radius | Page and state | Likely role | Confidence |
|---|---:|---|---|---|
| Small control | 4px | Form, default | compact | medium |
| Button or input | 6px | Homepage, default | control | medium |
| Card | 10px | Content page | surface | medium |
| Dialog | 16px | Form, open | overlay | low |

The values in this table are an example of the format only. Replace them with measurements from the website you are reviewing.

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

## Decide whether it is a real scale

A shared scale is more credible when the same value appears on several components with a similar visual role and across more than one page. It is also useful when smaller controls use smaller corners than larger surfaces without introducing many exceptions.

Check desktop and mobile states separately. Responsive layouts may reduce a card radius, change a dialog into a sheet, or alter the corner treatment of a full-width section. Record those changes instead of forcing every state into one token.

Keep special shapes separate. Pills often use a radius based on half their height, while circular controls use a radius large enough to make a circle. Neither should automatically become the largest ordinary surface token.

The Linear references above show repeated typography and interface treatment, but they do not provide border-radius measurements. Use them as captured reference context only, not as evidence for a radius value.

## Turn observations into CSS tokens

After verification, create provisional tokens that describe observed roles:

```css
:root {
  --radius-compact: 4px;
  --radius-control: 6px;
  --radius-surface: 10px;
  --radius-overlay: 16px;
  --radius-pill: 999px;
}
```

Keep a source note beside each value, such as "seen on three buttons and two inputs." Mark one-off values and values that were rounded from screenshots. These are implementation-ready observations, not proof of the site's private variable names or official design documentation.

## Verify before reuse

Before applying the scale to a redesign, check:

- Does each ordinary value appear on at least two components?
- Are nested surfaces smaller or intentionally equal to their parent?
- Do hover, focus, disabled, and open states keep the same radius?
- Does mobile reuse the value or introduce a deliberate variation?
- Are pills, avatars, and circular controls separated from ordinary surfaces?
- Are image corners aligned with the surface that contains them?

Fudge lets you inspect captured component styles, borders, radii, and page states so you can compare repeated surfaces instead of measuring a single screenshot. Once the values are checked, export the observations as CSS or another supported format.

## Use this in your AI agent

> Review the captured website for its border radius system. Sample buttons, inputs, cards, images, dialogs, badges, and outer sections across at least three pages and responsive states. Group recurring values by component role, separate pill and circular treatments, flag one-off values, and return a provisional CSS token list with evidence and confidence for each token. Do not present inferred tokens as the website's official internal design system.

[Install Fudge for your AI agent](/mcp) to inspect captured pages and turn checked observations into reusable design details.

---

Create a table with the component, radius, state, page, and viewport. Count repeated values, but compare components by role rather than by frequency alone. A value used on buttons, inputs, and compact controls is stronger evidence for a control radius than a value found repeatedly inside decorative illustrations.

Check whether the same value survives hover, focus, disabled, and open states. Review mobile separately because responsive layouts may intentionally change a card or sheet. Keep pills, avatars, circular controls, and full-height sheets in their own group. Their shape can depend on height or placement rather than the ordinary surface scale.

Round measurements only after the same pattern appears repeatedly. Label the result as observed or provisional unless the site's public documentation confirms the token names.

---

Use this workflow:

1. Capture a homepage, a content page, and a page with forms or dialogs.
2. List every rounded component and record its approximate CSS radius, state, viewport, and page.
3. Group repeated values into compact, control, surface, overlay, and special-shape categories.
4. Verify every proposed value on a second component and at another viewport width.
5. Publish the result with confidence notes and page references.

A concise output table can contain:

| Token | Value | Seen on | Confidence | Notes |
|---|---:|---|---|---|
| radius-control | 6px | buttons, inputs | high | repeated across pages |
| radius-surface | 10px | cards, media | medium | check mobile state |
| radius-pill | 999px | tags, badges | high | height-based shape |

Use observed or provisional language until source variables or official documentation confirm the site's naming.

## Related questions

- [Get the Color System from a Live Website](/share/get-the-color-system-from-a-live-website)
- [Extract a Typography System for an AI Coding Agent](/share/extract-typography-system-for-an-ai-coding-agent)
- [Extract a spacing scale for an AI coding agent](/share/extract-spacing-scale-for-an-ai-coding-agent)
- [Get component styles from a live website](/share/get-the-component-styles-from-a-live-website)