Overview
Corner radius adds a touch of elegance and softness to components, making them more inviting and visually pleasing. By rounding the corners, designers can eliminate sharp edges and create a more approachable and friendly appearance. This subtle design detail can contribute to a positive user perception and enhance the overall visual appeal of the interface.
Resources
Values
| Value | Variable |
|---|---|
| corner-radius: 2px | now-global-border-radius--sm |
| corner-radius: 6px | now-global-border-radius--md |
| corner-radius: 8px | now-global-border-radius--lg |
Small
The small radius value is commonly utilized for smaller components, such as badges.
The medium radius is used for elements often nested inside others, like buttons.
The large corner radius is used on large vessel-like containers, such as modals.