Radius

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

Border radius tokens control the roundness of corners throughout your interface. Apsara provides a consistent radius scale with support for different style variants.

Radius Scale

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

Modern Style (Default)

TokenValueUse Case
--rs-radius-12pxSubtle rounding for small elements
--rs-radius-24pxBadges, chips, small buttons
--rs-radius-36pxInputs, buttons, cards
--rs-radius-48pxModals, dialogs, larger cards
--rs-radius-512pxLarge containers, panels
--rs-radius-616pxExtra large containers
--rs-radius-full800pxPills, circular elements, avatars

Traditional Style

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

TokenValueUse Case
--rs-radius-18pxSubtle rounding for small elements
--rs-radius-216pxBadges, chips, small buttons
--rs-radius-320pxInputs, buttons, cards
--rs-radius-424pxModals, dialogs, larger cards
--rs-radius-532pxLarge containers, panels
--rs-radius-640pxExtra large containers
--rs-radius-full1600pxPills, circular elements, avatars

Style Comparison

TokenModernTraditional
--rs-radius-12px8px
--rs-radius-24px16px
--rs-radius-36px20px
--rs-radius-48px24px
--rs-radius-512px32px
--rs-radius-616px40px
--rs-radius-full800px1600px

Usage

1/* Buttons */
2.button {
3  border-radius: var(--rs-radius-3);
4}
5

6/* Cards */
7.card {
8  border-radius: var(--rs-radius-4);
9}
10

11/* Badges and chips */
12.badge {
13  border-radius: var(--rs-radius-2);
14}
15

16/* Pills and tags */
17.pill {
18  border-radius: var(--rs-radius-full);
19}
20

21/* Avatar */
22.avatar {
23  border-radius: var(--rs-radius-full);
24}
25

26/* Input fields */
27.input {
28  border-radius: var(--rs-radius-3);
29}
30

31/* Modal */
32.modal {
33  border-radius: var(--rs-radius-5);
34}

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