Radius

Radius refers to the rounded corners found in elements and various pieces of content. These corners provide a touch of personalization to the design, resulting in a bolder and more expressive appearance.

Component checklist

Design

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.

An example of hierarchy

An example of hierarchy

 

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.

Preview
Border Radius
2px
2px
Small
Use a small radius to soften the corners of areas you don’t want to look like cards or boxes.
Collection
-
Variable
--border-radius-small
6px
6px
Medium
Medium is the default radius for most elements.
Collection
-
Variable
--border-radius-medium
8px
8px
Large
Use a large radius when an element is used as a Container for other elements and pieces of content.
Collection
-
Variable
--border-radius-large
50%
50%
Full
Use a full radius to create a circle.
Collection
-
Variable
--border-radius-full
999px
999px
Pill
Use a pill radius to round off the edge to a half circle, creating a pill-like shape.
Collection
-
Variable
--border-radius-pill