Rounded corners

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
RoundedCorners-DoDont-Do
Don’t
RoundedCorners-DoDont-Dont

 

Nesting

Nested border radii look really funky if they're the same. To maintain the same curvature, the outer radius = inner radius + padding.

RoundedCorners-Example-Nesting