Inspect a website's border radii and shadows from its URL

You can inspect a website's border radii and shadows from its URL by comparing repeated components across the page. Look at buttons, inputs, cards, menus, dialogs, image containers, and major sections. The goal is to identify patterns and roles, not to guess one value from one isolated element.

Start with a focused page review

Open the URL at a consistent viewport size, then review the page in this order:

1. Note the main page and section surfaces.
2. Compare buttons, inputs, tags, and other compact controls.
3. Check cards, panels, tables, and content groups.
4. Inspect menus, popovers, dialogs, and other floating elements.
5. Review image containers, thumbnails, and promotional blocks.
6. Compare hover, focus, selected, and open states when available.

For each element, record its approximate corner shape, shadow strength, shadow direction, and surrounding separation. A useful note might say: "Small rounding on controls, medium rounding on cards, larger rounding on promotional media, and shadows limited to floating elements." That remains useful even when the exact CSS value is not visible.

Separate radii by component role

Border radii often form a small scale. Controls may be nearly square or gently rounded. Cards may use a moderate curve. Large image blocks or promotional panels may use a wider curve. Compare at least three examples before treating a shape as a repeated site pattern.

Also distinguish a radius from a pill treatment. A fully rounded button or tag may be intentional for compact labels, while the same shape would be inappropriate for a content panel. Record the component role beside the observation.

If the page mixes sections, group observations by context. A product dashboard may use restrained rounding for dense utility surfaces, while a marketing hero may use larger corners. That difference can be deliberate rather than inconsistent.

Read shadows as elevation signals

A shadow under a menu or dialog usually signals that the object sits above the page. A faint shadow around a card may simply soften the boundary. A broad colored glow behind a hero panel may be decorative rather than structural. Keep those roles separate.

For every visible shadow, note:

• Role: floating, soft separation, decorative glow, or none.
• Color: neutral, cool, warm, or tinted.
• Opacity: barely visible, moderate, or prominent.
• Blur and spread: tight edge, soft halo, or broad diffusion.
• Direction: centered, below, or visibly offset.
• State: always present, or added during hover, focus, or opening.

Do not turn every visible edge into an elevation token. If the page relies mostly on borders and flat surfaces, that restraint is part of the design.

Turn observations into a reusable reference

Create a table with columns for element, radius category, shadow category, location, and confidence. Use labels such as control, card, overlay, media, and page surface. Mark exact values as unverified unless you inspected the site's accessible styles or a provided design file.

A practical first draft might define three radius groups and three elevation groups. Use the smallest radius for compact controls, the middle radius for ordinary containers, and the largest only where the page clearly emphasizes softness. Reserve stronger shadows for objects that need to appear lifted.

A website capture can help you inspect page structure, component styles, borders, radii, and shadows together. This makes it easier to compare a treatment across repeated elements instead of relying on one screenshot or one guessed CSS declaration.

Use this in your AI agent

> Inspect the website at the supplied URL for border radii and shadows. Group observations by controls, cards, overlays, media, and page surfaces. Report repeated radius patterns, shadow color, opacity, blur, spread, and state changes. Separate clearly observed details from estimates, then give me a compact CSS-ready reference without claiming access to private source code.

Use Fudge with your AI agent to inspect saved website references with that prompt.

Use a small observation table rather than a list of guessed CSS values. Include element, pattern, approximate value, where observed, and confidence.

For example:

For shadows, record the visual role as floating, soft separation, decorative glow, or none. Add color, opacity, blur, and spread when they are clear enough to compare.

Keep estimates separate from verified values. If you later build CSS tokens, map the findings to names such as radius-control, radius-card, shadow-floating, and shadow-glow. This preserves the design logic without turning a one-off hero effect into the default shadow for every card.

Treat the page as several visual contexts, then identify the shared rules inside each context. A dark product interface may use restrained rounding and low-contrast borders, while a marketing section may use larger corners and softer shadows.

First separate structural surfaces from promotional surfaces. Structural surfaces include navigation, forms, tables, and utility panels. Promotional surfaces include hero cards, feature illustrations, and large image blocks. Compare each group internally before comparing the groups with each other.

Next ask whether the difference communicates hierarchy or belongs to a separate component. A stronger shadow on an open menu is usually a state. A larger radius on a hero image may be a deliberate media style. Document these as scoped patterns rather than forcing every observation into one universal token set.

When implementing the new design, start with the most repeated patterns and add exceptions only when they have a visible purpose.

Related questions

• Inspect a website's color roles from its URL
• How to Check Typography Hierarchy on a Website
• Inspect a website's component styles from its URL
• How to Check a Website's Spacing Scale