Radius

Merid's corners are generous and consistent. Larger surfaces get larger radii, and radius steps down as elements nest, so inner corners stay concentric with outer ones.

Scale

--mrd-radius-xs6px · Focus ring, skeleton, inline code

--mrd-radius-sm8px · Tooltip, small tiles

--mrd-radius-md10px · Icon button, menu item, nav link

--mrd-radius-lg12px · Button, input, alert, row

--mrd-radius-xl14px · Window frame, popover

--mrd-radius-2xl16px · Menu, mobile card

--mrd-radius-card20px · Card, panel, dialog

--mrd-radius-3xl24px · Call-to-action block

--mrd-radius-full999px · Pill, badge, switch, avatar

The rule of thumb is 20 → 14 → 12 → 8. A card uses --mrd-radius-card (20px); a window frame inside it uses --mrd-radius-xl (14px); a button inside that uses --mrd-radius-lg (12px); a small tile inside a button uses --mrd-radius-sm (8px).

Step radius down as you nest, so the gap between two edges looks even all the way round.

Avoid

Give an inner element the same radius as its container. The inner corner will look pinched.

Pills

--mrd-radius-full is for elements whose shape is defined by their height: pills, badges, switches and avatars. Do not use it on buttons with text; Merid buttons use --mrd-radius-lg.

Radius

Scale

Nesting

Pills