The radius by role check: giving each kind of element its own shape
Shape follows role: buttons get one radius, cards and photos another, form fields a third, and each is set once and reused. The Critic's radius by role check lists how many distinct border-radius values a page's stylesheet uses. It only fails a page that sets no radius at all, so the count it reports is the useful part: a handful of values means corners are assigned by role.
Two ways corners go wrong
Generated layouts tend to fail in one of two directions. Either every element gets the same generous rounding, so buttons, cards, inputs, badges and images all look like the same soft lozenge and nothing signals what it's for. Or each component arrives with its own number, 6 pixels here, 12 there, 9 on a badge, and the page looks assembled from parts that never met. Both lose the same thing: the corner as a signal. When shape follows role, a visitor learns within a few seconds that the round thing is a button and the square thing is content, without reading a word. The border radius guide goes into the design reasoning.
What the radius by role check does
The Critic collects every border-radius value in the page's styles, as written, and counts the distinct ones. A value written as a variable, such as var(--rk), counts once however many elements use it. The detail line reports the total, for example "5 radius value(s) assigned by role".
Be clear about what that means. The check passes whenever at least one radius is declared, and fails only on a stylesheet that never sets one. It doesn't work out which element has which radius, so it can't prove that shapes follow roles. What it gives you is a number to read:
| Count | What it usually means |
|---|---|
| None (fails) | No corners were set at all: the browser defaults are doing the design |
| One | Probably one value on everything, the lozenge problem |
| A few, mostly variables | Roles defined once and reused, which is the aim |
| Many raw numbers | Each component chose its own; worth consolidating |
How the design systems assign corners
Every design-engine page defines its radii as role tokens at the top of the stylesheet: one for controls (buttons, tags, sidebar links), one for content (cards, product photos, pricing plans, dashboard tiles), and one for larger surfaces (the hero photo, panels, forms), which matches the content radius. Form fields and booking time slots use the control radius but cap it at 14 and 12 pixels, so a pill-shaped system doesn't produce pill-shaped text boxes.
| System | Controls | Cards and photos |
|---|---|---|
| Editorial | Pill | Square |
| Technical | 6px | 10px |
| Luxury | Square | Square |
| Playful | Pill | 28px, with a blob-shaped hero photo |
| Brutalist | Square | Square |
| Organic | Pill | 22px, with an arched hero photo |
| Swiss | Square | Square |
Three systems are square throughout, and that's still a role decision: the absence of rounding is the point of Luxury, Brutalist and Swiss. Editorial shows the split most clearly, with round buttons on a page of square photos and cards. The individual pages for Editorial and Playful describe their shapes in context.
Setting radius by role in your own CSS
- List the roles on your page: things you press, things you read, containers that hold other things, and fields you type in.
- Give each role one radius, as a custom property such as
--radius-controland--radius-card. - Use only those properties in components. If a new component seems to need its own number, it probably belongs to an existing role.
- Nest carefully: an element inside a rounded container should have a smaller radius than its parent, or none, so the corners look concentric.
Limits
- It's a weak automated test. It catches only a page with no radius at all. Read the count and look at the page.
- Not enforced. The design gate doesn't include it, so it never stops publishing.
- Fixed per system on design-engine pages. You can't change a system's radii in the builder; the code editor keeps colour tokens, not radius changes. Switching direction is how you change shapes.
Questions people ask
Should buttons and cards have the same radius?
Usually not. Giving controls and content different shapes helps people tell them apart. Anticode's Editorial system, for example, uses pill buttons with square cards.
How many radius values should a site use?
As many as it has roles, typically two to four, each defined once and reused.
Can I make my Anticode site's corners rounder?
Not within a system. Choose a direction whose shapes you prefer, such as Organic or Playful for softer corners.