# Border Radius

This base radius can be found in almost all of our components that have a
defined "edge": [Button](../Button/Button.md), [Card](../Card/Card.md),
[InputText](../InputText/InputText.md), and [Menu](../Menu/Menu.md) are all
examples of this in practice.

If an element is nested directly inside of a container with the base radius, or
is itself smaller than the base radius, the small radius may be applied.

Larger rounded corners should be used sparingly, but are available for cases
where the user may expect a smoother corner, such as
[ProgressBar](../ProgressBar/ProgressBar.md). `--radius-circle` can be used for
circular elements like [Radio](../RadioGroup/RadioGroup.md) options or the "pip" in
[Switch](../Switch/Switch.md).

| Radius            | Visual |
| :---------------- | :----- |
| `--radius-small`  |        |
| `--radius-base`   |        |
| `--radius-large`  |        |
| `--radius-larger` |        |
| `--radius-circle` |        |