Radius and borders

Corner radius

Small elements take a small radius, large surfaces a large one. The scale rests on a 10 px base (radius-base, radius-lg): controls take 10 px, cards and dialogs 14 px. An element inside a container takes the container radius minus the gap between them; rows in a 10 px menu with 4 px padding have 6 px corners. In Tailwind the rounded-* utilities are backed by these tokens.

appearance.radius in the brand file changes the whole scale at once: default, none (square), compact, soft and round. See Theming for details.

Token	Value	Preview
--bigbang-radius-none	0px
--bigbang-radius-base Base of the scale	10px
--bigbang-radius-2xs Tooltip arrow	2px
--bigbang-radius-xs Checkbox, chart bar end	4px
--bigbang-radius-sm Menu row, month and year cell, table expand button, keyboard key	6px
--bigbang-radius-md Tag, tooltip, inline code	8px
--bigbang-radius-lg Button, form field, tab, popover, menu, code block	10px
--bigbang-radius-xl Card, dialog, toast, drawer	14px
--bigbang-radius-2xl Large promotional areas	18px
--bigbang-radius-3xl Full-screen surfaces	22px
--bigbang-radius-full Badge, avatar, pill button	9999px

Glass edges

Glass surfaces keep the radius of their component. The glass edge is drawn inside that radius: a light rim, a border-default-wide hairline and, in Chromium, a refraction band of material-glass-refraction-band (12 px) along the edge. The popover arrow is hidden on glass, so the panel reads as one rounded shape.

Border width

Borders are 1 pixel. The focus indicator is a solid 2-pixel outline drawn outside the element with a 2-pixel gap (focus-offset), so it shows on both light and dark backgrounds. On elements that sit flush against their neighbours or inside a clipping container (tabs, menu rows, Anchor links, the CodeBlock scroll region) the same outline is drawn inside. In Tailwind the focus-outline and focus-outline-inset utilities apply this rule. For border colours see Colours.

Token	Light mode	Dark mode
--bigbang-border-width-default Form fields, cards, dividers	1px1px1px	1px1px1px
--bigbang-border-width-focus Keyboard focus outline, the danger halo of an invalid field	2px2px2px	2px2px2px

Guidelines

Keep nested radii in step

DoLarge radius outside, small inside: the corners look parallel.

Don'tAn inner radius larger than its container makes the corners clash.