ANVIL · Radius & Borders
Preview
Radius samples
0px
4px
8px
12px
9999px
Primitive Values
Primitive token names and raw values
| Primitive token | Value | Meaning |
|---|---|---|
| Radius | ||
| --p-radius-0 | 0px | None |
| --p-radius-sm | 4px | Small |
| --p-radius-md | 8px | Medium |
| --p-radius-lg | 12px | Large |
| --p-radius-full | 9999px | Pill / full |
| Border Width | ||
| --p-border-thin | 1px | Thin |
| --p-border-medium | 2px | Medium |
| --p-border-focus | 3px | Focus width |
Semantic Mapping
Semantic radius and border tokens
| Semantic token | Mapped value | Resolved value |
|---|---|---|
| Radius | ||
| --r-none | --p-radius-0 | 0px |
| --r-sm | --p-radius-sm | 4px |
| --r-md | --p-radius-md | 8px |
| --r-lg | --p-radius-lg | 12px |
| --r-full | --p-radius-full | 9999px |
| Borders | ||
| --border-thin | --p-border-thin + --c-border-subtle | 1px solid var(--c-border-subtle) |
| --border-focus | --p-border-focus + --c-state-focus | 3px solid var(--c-state-focus) |
| --border-error | --p-border-medium + --c-state-error | 2px solid var(--c-state-error) |