Foundations

Border Radius

Border radius softens element edges,   giving a modern, approachable look. Rounded corners enhance visual appeal, improve interaction, and create a cohesive, user-friendly interface.

View Figma UI Kit

View GitHub repo

None – 0

XXS – 4px

XS – 8px

SM – 12px

MD – 16px

LG – 24px

XL – 32px

XXL – 40px

XXXL – 64px

FULL – 999px

Design Tokens

Value

None – 0

XS - 4PX

SM - 8

MD - 12

LG - 24

XL - 32

XXL - 40

XXXL - 64

FULL - 999

Token

var(--radius-none)

var(--radius-xs)

var(--radius-sm)

var(--radius-md)

var(--radius-lg)

var(--radius-xl)

var(--radius-2xl)

var(--radius-3xl)

var(--radius-full)

NativeWind Config

borderRadius: {
  none: '0',
  xs: '4px',
  sm: '8px',
  DEFAULT: '8px',
  md: '12px',
  lg: '24px',
  xl: '32px',
  '2xl': '40px',
  '3xl': '64px',
  full: '999px',
},

Blur

Border Width