Rounding Utilities rounding utilities link

Full documentation: https://webawesome.com/docs/utilities/rounding

CSS Utilities 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 rounding classes link

Class Name	border-radius Value
`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`