Border Radius

Last updated: 18 days ago

Category: Basic

Use _r[-*] style classes to independently set an element's border radius, supporting customization of size and position. The sizing is based on a 3px increment (e.g., _r-3 means 3px*3).

Introduction

This framework defines a set of border radius classes that allow you to control the size and position of rounded corners. Simply use the _r class to apply a default 3px border radius.

Multiplier Radius

The default radius size is 3px. The radius size classes include _r-0 to _r-10, where:

• _r-0 means no radius
• _r-1 means 1× the default size (3px)
• _r-2 means 2× the default size (6px)
• And so on up to _r-10

Relative Radius

Another set of radius classes corresponds to the framework's base sizes:

• _r-xxs: 4px
• _r-xs: 8px
• _r-sm: 14px
• _r-md: 24px
• _r-lg: 32px
• _r-xl: 40px
• _r-xxl: 56px

Common Radius Values

The most frequently used radius values in this framework are:

• _r-input/_r-input-md: 6px (default for form elements and small components)
• _r-bubble: 9px (used for popups, dialogs and floating elements)
• _r-input-sm: 3px (small form elements)
• _r-input-lg: 9px (large form elements)
• _r-full: 99999px (full circle/oval)

Positional Radius

By default, radius applies to all corners. You can also target specific sides:

• _r-s: left side
• _r-e: right side
• _r-t: top
• _r-b: bottom

Related Classes

Different radius classes can be combined, for example _r-2 _r-s means 6px radius on the left side.