Extract a Website's Border Radius Scale

Contents

• [Build the scale from repeated evidence](#build-the-scale-from-repeated-evidence)
• [Separate tokens from exceptions](#separate-tokens-from-exceptions)
• [Check how radius works with other styles](#check-how-radius-works-with-other-styles)
• [Validate with a component sheet](#validate-with-a-component-sheet)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

To extract a website's border-radius scale, collect the corner values from repeated components, group near-identical measurements, and assign each group a role such as control, card, panel, or pill. Do not copy one rounded button and call it a system: the scale is the set of choices that repeats across surfaces and controls.

Build the scale from repeated evidence

Start with a component checklist:

• Buttons and compact controls
• Text fields and search boxes
• Cards and content panels
• Dialogs, menus, and popovers
• Badges, tags, and status chips
• Images, thumbnails, and media frames
• Large page sections or feature panels

For each item, record the visible radius and the component dimensions. A 12px radius on a small control does not have the same visual effect as 12px on a large panel. Also note whether the corners are fully rounded, slightly rounded, or square, and whether a parent container clips its child content.

Use a table like this while inspecting:

The captured Linear examples below are good references for comparing repeated treatment across pages. Their notes describe compact controls, muted dividers, and consistent surfaces. Use them to compare the feel of the corners across a page, but do not assume an exact numeric value that is not shown.

Separate tokens from exceptions

Most useful systems have a short scale rather than a unique radius for every component. Group values that are equal or visually indistinguishable at the captured size. A practical starting structure might be:

These values are a token structure, not a claim about the reference site's exact measurements. Replace them with the values you observe. If the site uses only two or three levels, keep only those levels. A smaller scale is usually easier to apply consistently.

Then mark exceptions explicitly. A pill-shaped status label, a circular avatar, and a media frame with a special crop may need distinct rules. Do not force every component into the nearest token if doing so changes its function or silhouette.

Check how radius works with other styles

Radius cannot be evaluated alone. Record the surrounding treatment:

• Does a border follow the same curve as the background?
• Does a shadow make the corner appear softer or larger?
• Does an image clip to the parent radius?
• Does a divider stop before the corner or run beneath it?
• Does a hover state change the radius, border, or only the color?
• Are nested surfaces using a smaller radius than their parent?

The combination of radius, border, shadow, spacing, and contrast often creates the recognizable feel. A radius scale reused with different padding may look like a different system even when the numbers match.

Validate with a component sheet

Create one comparison sheet containing a button, input, card, dialog, tag, and image frame. Render each with the proposed tokens at the same size as the reference where possible. Look for three problems:

1. Too many levels, which makes the system hard to remember.
2. Too little variation, which makes every surface feel identical.
3. Nested corners that conflict, such as a child image extending past its rounded card.

Check narrow and wide layouts. A large panel may need a smaller radius on a narrow screen if the original design changes with available space. Record that as a responsive rule rather than silently creating a second unrelated token.

Use this in your AI agent

> Extract the border-radius system from this captured website. Inspect repeated buttons, inputs, cards, panels, dialogs, tags, images, and nested surfaces. Record observed corner values, group repeated values into a small token scale, separate full-pill and circular exceptions, and note how borders, shadows, clipping, spacing, and responsive layouts affect the result. Do not invent exact values when they are not observable. Return a component table plus CSS variables ready for a design handoff, and compare the examples below before finalizing the scale.

Install Fudge for your AI agent

Use the fewest tokens that explain the repeated shapes you can observe. For many interfaces, three structural levels plus special cases are enough: a small radius for controls, a medium radius for cards and fields, and a large radius for prominent panels. Add a full-radius token for pills and circles.

A useful starting set is:

• radius-sm for compact buttons, inputs, and small controls
• radius-md for cards, menus, and ordinary surfaces
• radius-lg for large feature panels or dialogs
• radius-full for tags, pills, and circular elements

Do not add radius-xl just because the token list looks more complete. Add it only when repeated components clearly use a larger treatment. Likewise, if the captured pages use nearly square corners throughout, a two-level scale may be more accurate.

Validate the proposed set with real components. If two values look the same at their intended sizes, merge them. If one value appears only once, label it an exception instead of promoting it to a global token. The Linear references below suggest consistency matters more than a long list of values, especially across compact controls and surfaces.

Inspect the boundary in layers. First compare the outer background and border. If both follow the same curve, the radius is probably part of the component. Next check the content inside it. If an image or colored block stops at the same curve, the parent is likely clipping its contents. If only the image is rounded while the surrounding panel is square, the radius may belong to the image alone.

Then compare states and siblings. Hover, focus, and disabled states can reveal whether the radius stays fixed while the border or shadow changes. Repeated cards or controls are stronger evidence than a single decorative block. Also check whether a shadow extends beyond the corner: a soft shadow can make a square edge appear rounded, especially at small sizes.

Record confidence in your notes. Mark a value as high confidence when the same curve appears on the border, background, and clipped content across several components. Mark it as uncertain when the apparent curve comes only from a shadow, gradient, image crop, or low-resolution capture. This keeps the final token scale honest and makes later verification straightforward.

Related questions

• Extract a Website's Color System
• Capture a Website Typography System for Reuse
• Capture a spacing scale from a live website for reuse
• Extract a Website's Component Styles