Components that appear with their own background color or visible border include a border radius. Border radius defines how rounded the corners of the component should be.

Sharp edges are sometimes associated — consciously or unconsciously — with pain (think of how painful it is to bang your shin on the sharp corner of a coffee table). Rounded corners are easier on the eyes, guiding users toward the element's center.^[1] Even a slightly rounded corner can avoid the painful association of sharp corners. Be careful not to overdo border radius, though, as disproportionately large radii (that's the plural of "radius") can also be unpleasant to look at.