Border Radius
Border radius decisions made ad hoc produce interfaces where similar elements have subtly different shapes, making the UI feel unpolished without an obvious cause.
Meteor provides two layers of border radius tokens: semantic tokens for general use, and element-scoped tokens that encode the correct radius for specific component types. Always prefer an element-scoped token when one exists for your use case. Fall back to semantic tokens when no element-scoped token applies.
Element-scoped tokens
Element-scoped tokens encode the right radius for specific element types. Use these before reaching for a semantic token.
Semantic tokens
Use semantic tokens when no element-scoped token fits your element.
Usage
Do
- Use --border-radius-round for pill badges, avatar circles, and fully rounded tags.
- Use border-radius tokens for corner radii.
Don't
- Use a large arbitrary value like border-radius: 999px or 50%.
- Use scale tokens (--scale-size-*) for border-radius. Using scale directly removes the semantic layer and doesn't allow for theming or updates on border radius tokens.