webawesome/docs/pages/tokens/borders.md

meta

meta
title description Border Tokens Border tokens are used to control borders and corners.

Border Tokens

Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.

Token	Value	Example
--wa-border-style	solid
--sl-border-width-thin	0.0625rem (1px)
--sl-border-width-medium	calc(var(--wa-border-width-thin) * 2) (2px)
--sl-border-width-thick	calc(var(--wa-border-width-thin) * 3) (3px)

Corners

TODO

Token	Value	Example
--wa-corners-half	calc(var(--wa-corners-1x) * 0.5)
--wa-corners-1x	0.25rem
--wa-corners-2x	calc(var(--wa-corners-1x) * 2)
--wa-corners-3x	calc(var(--wa-corners-1x) * 3)

Special Corners

TODO

Token	Value	Example
--wa-corners-pill	9999px
--wa-corners-circle	50%
--wa-corners-sharp	0