This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

  • Foundation/

Radius

# Overview

Four nested rectangles with rounded corners against a salmonberry colored background.

# Basics

A rectangle with rounded edges with a pointer cursor nearby.
With few exceptions, interactive components are rounded.
A larger and smaller rectangle. The smaller rectangle has less rounded corners than the larger rectangle.
An object's border radius should be proportional to its shortest side.

# Nested objects

A large rectangle with four smaller rectangles nested inside. The larger rectangle has the same border type as the nested rectangles.
A nested object should inherit its parent's border type: rounded or not rounded.
A large rectangle with a smaller rectangle nested within. Both have a border radius but the nested rectangle's radius is smaller.
The border radius of a nested, rounded object should be smaller than that of its parent.

# Application

# Tokenized options

Cedar components include appropriate radii values applied by default. Use tokens to apply radii values to bespoke elements or containers.

Four numbered shapes, each shape with softer rounded corners than the next. The fourth shape is by far the roundest.
  1. Sharp: cdr-radius-sharp
  2. Soft: cdr-radius-soft
  3. Softer: cdr-radius-softer
  4. Round: cdr-radius-round

# When to use

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

# When to use a different approach

  • Don't use roundness as the only means of conveying actionability
  • Don't round the corners of small, non-interactive pieces of UI
  • Don't overuse rounded corners, consider the whole page