Radius

Overview of the border radius scale and style variants in Apsara.

Border radius tokens control the roundness of corners throughout your interface. These tokens automatically adjust based on the active style variant—modern style uses sharp, minimal radii while traditional style uses softer, more rounded corners. By using radius tokens instead of fixed values, your custom components will seamlessly adapt 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)

TokenValueDescription
--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.

TokenValueDescription
--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

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