We use rectangles with rounded corners because they are easier on the eyes than a rectangle with sharp edges. Rounded corners not only take less cognitive effort to visually process, they also give our UI a more modern look-and-feel.
Usage
Do
Do use “Rounded Small” for most smaller components like chips, and “Rounded Large” for larger components like modals. Predominantly, radii should get larger the larger the component.
Don’t
Don’t use sharp, squared corners, except on desktop slide out panels.
Nesting
Nested border radii look really funky if they're the same. To maintain the same curvature, the outer radius = inner radius + padding.