Skip to main content
Styles

Corner radius

Draft

Arch UI allows for rounded corners to a variety of components. For simple reference, the metric values for corner radius are 16, 12, 8, and 4. These radius metrics are dependent on the size of the component that it is applied to.

Common alternative names

Border radius, bevel, rounded corners

Usage​

Radius values​

The footprint of a component determines its radius values. Larger components that contain other components can have a greater corner radius. Each Arch UI component comes with the appropriate corner radius already applied. This guide provides insight into how radius values are applied in the Arch UI library.

Corner radius valueUsed for
16pxLarge container components like sheets and dialogs
12px (default)Medium components like cards, snack bars, banners
8pxMedium or small components that often live inside others, like buttons or nested components
4pxSmall components like tags

16px​

A 16px corner radius is used on large vessel-like containers, such as sheets and dialogs.

16 corner radius16
My commute preference
Walk to pickup
Bike rack
Save

12px​

The number used most of the time for corner radii is 12px. Medium-sized components like cards, message cards, snack bars, and banners default to this value.

12 corner radius

12
Heading
Consilio difficultates superare potest esse, immo
Label
12
Message that takes 2 lines to explain and goes on

12 A thing happened

8px​

An 8px radius is used for elements often nested inside others, like buttons.

8 corner radius

8 Label

4px​

A 4px radius is used on small components like tags and badges.

4 corner radius

4 20-25 min

4.4 (104)
$0 fee
Nested components​

For components with a default corner radius of 12px, their corner radius can be set to 8px when nested inside another component. This subtly creates balance with the parent component.

Documents
Drivers License

Expires 8/12/2025

Default 12px corner radius

A standalone card keeps its default 12px radius.

Vehicle Insurance

Progressive gold plan

Nested 8px corner radius

When nested inside a parent, the inner card steps down to 8px.