Design
Component checklist
Review required
React
Review required
Definition
A radius refers to the amount of curvature or rounding applied to the corners of a rectangular shape or element.
It determines how none or smooth the corners of an element appear. In addition to its aesthetic impact, the radius can affect an element's perceived weight and texture.
Purpose and hierarchy
The purpose of radius rules is to highlight the container nesting level visually – the more the container envelops, the bigger its radius.
This description serves as a general guideline rather than a strict rule, as there is relative freedom in using the border radiuses according to your needs.
Variables
In Soul, we offer radius variables to help you maintain a consistent appearance throughout your project when simultaneously rounding all corners of an element. You can use the corresponding class or variable representing the desired radius value to apply these variables.
2px
2px
Small
Use a small radius to soften the corners of areas you don’t want to look like cards or boxes.
Syntax: Web
-
Collection
-
Mixin
-
Variable
--border-radius-small
Token set
Core
6px
6px
Medium
Medium is the default radius for most elements.
Syntax: Web
-
Collection
-
Mixin
-
Variable
--border-radius-medium
Token set
Core
8px
8px
Large
Use a large radius when an element is used as a Container for other elements and pieces of content.
Syntax: Web
-
Collection
-
Mixin
-
Variable
--border-radius-large
Token set
Core
50%
50%
Full
Use a full radius to create a circle.
Syntax: Web
-
Collection
-
Mixin
-
Variable
--border-radius-full
Token set
Core
999px
999px
Pill
Use a pill radius to round off the edge to a half circle, creating a pill-like shape.
Syntax: Web
-
Collection
-
Mixin
-
Variable
--border-radius-pill
Token set
Core