Align border radius across containers

[alexlvrs]

Status: In Progress
Date: 2026-03-09
Decision makers: EDS Core Team

---

Context

We are currently uses different border-radius values across components. In particular, input-related containers (dropdowns, search fields, menus, and input wrappers) sometimes use a radius that differs from the button radius. Those component often appear adjacent to buttons or as part of compound input controls.

Because of inconsistent radii, the interface currently shows:

• Slight visual misalignment between buttons and inputs
• Inconsistent corner between containers
• A fragmented visual rhythm when elements appear side-by-side

This becomes especially noticeable in patterns like:

• Search + action button combinations
• Input fields with dropdown panels

The decision is driven by the following requirements:

• Visual consistency across UI components
• Predictable component composition
• Alignment with existing button design tokens

Additionally:
Buttons are one of the most reused primitives in the system, their radius already functions as a visual baseline. Therefore aligning other interactive surfaces to the same radius improves systemic coherence.

Options Considered

Option 1: Keep different radii per component
Allow each component (inputs, dropdowns, containers) to define its own radius values.

Pros:

• Maximum visual flexibility
• Components can be independently styled

Cons:

• Leads to visual inconsistency
• Harder to maintain token system
• Designers must make repeated radius decisions
• Components may visually clash in compound layouts

Option 2: Use multiple standardized radii tiers

• Define multiple radius tokens (e.g., small, medium, large) and allow components to choose.

Pros:

• More structured
• Supports visual variation where needed

Cons:

• Still allows mismatches between adjacent components
• Increases design token number
• Requires additional design decisions per component

Option 3: Align component radii to the button radius

• Use the button radius as the default radius for all interactive containers, including:
• Input fields
• Dropdown panels
• Inputs containers

Suggestion lists

Pros:

• Strong visual consistency
• Simplifies the design token system
• Predictable component composition
• Clear baseline
• Reduces styling variance

Cons:
. Slightly reduces stylistic flexibility

• Some existing components must be updated