Border Radii

Use radius tokens to keep related controls and containers consistent. Start with the library component's radius, and use the shared scale when composing a new element.

Explore the cornersborderRadius: "2xl"

radii.2xl

1rem · 16px at a 16px root and roundness factor 1.

Select a token to see the same radius on a square, a field, and a button. The dimensions stay fixed; only the corners change. These are illustrative compositions, not overrides for library defaults.

Radius scale

These nine radius tokens are published in the current package. Rem-based values below assume a 16px root font size and a roundness factor of 1.

radii.xs2px / 0.125rem

radii.sm4px / 0.25rem

radii.md6px / 0.375rem

radii.lg8px / 0.5rem

radii.xl12px / 0.75rem

radii.2xl16px / 1rem

radii.3xl24px / 1.5rem

radii.4xl32px / 2rem

radii.full9999px

Radius values as a table

Token	Base value	Pixels at a 16px root
`xs`	0.125rem	2px
`sm`	0.25rem	4px
`md`	0.375rem	6px
`lg`	0.5rem	8px
`xl`	0.75rem	12px
`2xl`	1rem	16px
`3xl`	1.5rem	24px
`4xl`	2rem	32px
`full`	9999px	Use for pills, or circles with equal width and height.

Each specimen uses the same dimensions. The dashed box shows the space the element occupies before its corners are rounded.

import { css } from "@hashintel/ds-helpers/css";

export const panel = css({
  borderRadius: "lg",
  backgroundColor: "bgSolid.surface",
  borderWidth: "1px",
  borderColor: "bd.subtle",
  padding: "4",
});

Shapes in context

Choose the radius together with the element’s height, padding, and role. Keep the defaults when using a library component.

Compact controls

Keep the outline clear at small sizes. Related fields and buttons should feel like a family.

Shown: lg / 8px

Larger containers

A larger radius can soften a panel. Give its content enough space to clear the corners.

Shown: 2xl / 16px

Pills and circles

With full, the element’s dimensions decide the shape: a pill when wide, a circle when square.

Shown: full / 9999px

Roundness

The roundness utility sets --roundness-factor, which is inherited by descendants. Each radius token is multiplied by that factor.

none ×0lg → 0px

sm ×0.75lg → 6px

md ×1lg → 8px

lg ×1.5lg → 12px

xl ×2lg → 16px

Roundness values as a table

Roundness	Factor	Result for `lg` at a 16px root
`none`	0	0px
`sm`	0.75	6px
`md`	1	8px
`lg`	1.5	12px
`xl`	2	16px

Each panel uses 2xl and its button uses lg. Only the roundness factor changes. The captions show the button’s resulting radius at a 16px root.

roundness: "none" produces square corners, including for full. The preset starts at factor 1. Apply an override to a deliberate group of elements and check the result in each size variant.

import { css } from "@hashintel/ds-helpers/css";

export const squarePanel = css({
  roundness: "none",
  borderRadius: "lg",
});

Nested elements

Choose smaller radii for controls inside a larger rounded container when the padding calls for it. Check the visible gap between the two curves; radius alone does not guarantee that they align.

One radius everywhere

Matching numbers can leave the space between nested curves uneven.

Outer 32px · inner 32px

Corners that follow each other

Subtract the inset from the outer radius as a starting point, then check the result.

32px − 16px inset = 16px inner

For these simple concentric shapes, an outer radius of 32px and a 16px inset leave an inner radius of 16px. Account for borders as part of the inset, and clamp a calculated inner radius to zero if the inset exceeds the outer radius.

Clipping and focus

Clip the content that needs it

A dedicated rounded wrapper crops media cleanly without clipping the whole component.

Leave room for focus

Keep focus rings outside the clipping layer so keyboard users can always see the active control.

Check focus rings and content clipping separately. Rounded corners can crop an image, while an overflow rule on the same container can also hide focus indicators or overlays. Preserve the behavior of Popover, Menu, and other floating components.

Use the token playground to compare values and Spacing to choose the gaps around them.