Border Radius 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
--hds-border-radius-none 0px
--hds-border-radius-sm 3px
--hds-border-radius-base 4px
--hds-border-radius-lg 8px
--hds-border-radius-xl 16px
--hds-border-radius-full 100%