Radius

Border radius tokens control how round corners are across the interface. They adjust to the active style variant: modern uses sharp, minimal radii, traditional uses softer ones. Reach for a token instead of a fixed value and your own components follow along when the style changes.

Radius scale

The radius scale provides 7 tokens for different levels of roundness, from subtle to fully circular.

Modern style (default)

--rs-radius-1

2px

Subtle rounding for small elements

--rs-radius-2

4px

Badges, chips, small buttons

--rs-radius-3

6px

Inputs, buttons, cards

--rs-radius-4

8px

Modals, dialogs, larger cards

--rs-radius-5

12px

Large containers, panels

--rs-radius-6

16px

Extra large containers

--rs-radius-full

800px

Pills, circular elements, avatars

Traditional style

When using data-style="traditional", the radius values increase for a softer, more rounded appearance.

--rs-radius-1

8px

Subtle rounding for small elements

--rs-radius-2

16px

Badges, chips, small buttons

--rs-radius-3

20px

Inputs, buttons, cards

--rs-radius-4

24px

Modals, dialogs, larger cards

--rs-radius-5

32px

Large containers, panels

--rs-radius-6

40px

Extra large containers

--rs-radius-full

1600px

Pills, circular elements, avatars

Usage

Radius tokens follow the active style variant, so a rule written once renders sharper under modern and softer under traditional.

1/* Dashboard widget container */
2.widget {
3  border-radius: var(--rs-radius-4);
4  overflow: hidden;
5}
6
7.widget-header {
8  border-radius: var(--rs-radius-4) var(--rs-radius-4) 0 0;
9}
10
11/* Filter tags with remove button */
12.filter-tag {
13  border-radius: var(--rs-radius-full);
14  display: inline-flex;
15  align-items: center;
16  gap: var(--rs-space-2);
17}
18
19/* Nested card with image */
20.preview-card {
21  border-radius: var(--rs-radius-4);
22}
23
24.preview-card-image {
25  border-radius: var(--rs-radius-3);
26}
27
28/* Search results dropdown */
29.search-results {
30  border-radius: var(--rs-radius-3);
31}
32
33.search-result-item:first-child {
34  border-radius: var(--rs-radius-3) var(--rs-radius-3) 0 0;
35}
36
37.search-result-item:last-child {
38  border-radius: 0 0 var(--rs-radius-3) var(--rs-radius-3);
39}
40
41/* User avatar with status indicator */
42.avatar-wrapper {
43  position: relative;
44}
45
46.avatar-image {
47  border-radius: var(--rs-radius-full);
48}
49
50.avatar-status {
51  border-radius: var(--rs-radius-full);
52  position: absolute;
53  bottom: 0;
54  right: 0;
55}
56
57/* Segmented control */
58.segmented-control {
59  border-radius: var(--rs-radius-3);
60}
61
62.segmented-control-item[data-active="true"] {
63  border-radius: var(--rs-radius-2);
64}

Enabling style variants

To switch between modern and traditional styles, set the data-style attribute on your root element:

1<!-- Modern style (default) -->
2<html data-style="modern">
3
4<!-- Traditional style -->
5<html data-style="traditional">

Best practices

Be consistent - Use the same radius token for similar elements throughout your application
Match element size - Use smaller radius values for smaller elements, larger values for containers
Use radius-full for circles - When you need perfectly circular elements, use --rs-radius-full
Consider style context - Choose modern for sharp, contemporary designs; traditional for softer, friendly aesthetics