Radius

Corner appearance of containers

Understanding radius

With few exceptions, interactive components are rounded. A rectangle with rounded edges with a pointer cursor nearby.

An object's border radius should be proportional to its shortest side. A larger and smaller rectangle. The smaller rectangle has less rounded corners than the larger rectangle.

Usage

When to use

  • Choosing a radius that's proportional to the size of the element
  • Applying rounded corners for actionable components like buttons, cards, and chips

When not to use

  • Applying roundness as the only means of conveying actionability
  • Rounding the corners of small, non-interactive pieces of UI
  • Overusing rounded corners, consider the whole page

Nested objects

A nested object should inherit its parent's border type: rounded or not rounded. A large rectangle with four smaller rectangles nested inside. The larger rectangle has the same border type as the nested rectangle.

The border radius of a nested, rounded object should be smaller than that of its parent. A large rectangle with a smaller rectangle nested within. Both have a border radius but the nested rectangle's radius is smaller.