Rounding Utilities
These utility classes round the corners of any element using the radius tokens from your theme, so buttons, cards, images, and custom components can all share the same corner style without hard-coded values. Common uses include rounding an image inside a frame, shaping an avatar into a circle, or giving a tag a pill silhouette.
Each class corresponds to one of the --wa-border-radius-* tokens in your theme, so the corner style you pick automatically updates if you adjust your theme's rounding scale.
Rounding Classes
| Class Name | border-radius Value |
Preview |
|---|---|---|
wa-border-radius-s |
--wa-border-radius-s |
|
wa-border-radius-m |
--wa-border-radius-m |
|
wa-border-radius-l |
--wa-border-radius-l |
|
wa-border-radius-pill |
--wa-border-radius-pill |
|
wa-border-radius-circle |
--wa-border-radius-circle |
|
wa-border-radius-square |
--wa-border-radius-square |