Radius

Border radius tokens control how round corners are across the interface. They follow the theme's radius setting, which multiplies the whole scale by a factor, and its scaling setting. Reach for a token instead of a fixed value and your own components follow along when either changes.

Radius scale

The radius scale provides 7 tokens for different levels of roundness, from subtle to fully circular. The values below are the defaults, at radius="medium" and scaling="1".

Every step except --rs-radius-full is a calc() over that base value, multiplied by the theme's radius factor and its scaling factor. --rs-radius-full is a fixed pill value that follows neither.

Usage

Radius tokens follow the theme's radius setting, so a rule written once renders sharper under small and softer under large.

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}

Changing the scale

Set the theme's radius setting, which multiplies every step by a factor:

1<Theme defaultValue={{ radius: "large" }}>
2  <App />
3</Theme>

none flattens the scale to 0, small multiplies by 0.75, medium is the default 1, and large and full multiply by 1.5. full additionally turns controls such as Button and Input into pills. Individual components take a radius prop that overrides the theme for that component alone. See Radius.

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
• Let the theme decide the character - Pick small for sharp, contemporary designs and large for softer, friendlier ones, rather than hard-coding either into a component