Guidelines
Border radius defines the rounded edges of an element’s container, shaping its appearance and influencing its visual identity. The degree of rounding, measured in pixels, can help distinguish different types of components or indicate their importance.
The border radius should be adjusted accordingly at different scales—smaller elements often require a subtler radius to maintain a balanced look.
Our design system provides border radius values as tokens within the theme.json library, ensuring consistency and easy customisation.
Check out the Styles or Live Tokens for more information and usage.
Code Usage Guidelines
The following guidelines outline the correct usage
|
✅ DO |
❌ DON’T |
|---|---|
|
Use design tokens for border radius to ensure consistency. |
Avoid hardcoding pixel, rem or percentage values for border radius. |
|
borderRadius: borderRadius.small |
borderRadius: 0.25rem borderRadius: 4px borderRadius: space[4] |
|
borderRadius: borderRadius.circle |
borderRadius: 99999px |
|
borderRadius: borderRadius.none |
borderRadius: 0 |