Border radius
We use border radius in our designs to give elements or components rounded corners.
Border radius tokens are used to give sharp edges a more subtle, rounded effect. This makes the edges of cards or buttons easier to see. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size (1rem).
Guidelines
Elements and components in the design system have the correct border radius applied. If you are building something new, this table shows what each radius should be used for:
For very small elements that require a radius
DEFAULT.
Atoms and small components such as Buttons, Inputs, Compact messages
Molecules or containers that could have Atoms inside of them such as Cards, Content blocks and Comfortable messages
Larger components and containers that will likely have multiple nested elements, such as Journey summary, Search widget and Modals
Nested radius
Elements with a radius that are nested within another element with a radius must be distant at least 2x times of their own radius.
For example, an element with a radius of 8, must be at least 16px away from the edge of its parent.
