Foundations

Border Width

Borders in UI design define structure, improve readability, and guide user attention, enhancing clarity and organisation for a better user experience.

View Figma UI Kit

View GitHub repo

None – 0

SM - 1px

MD – 2px

LG – 3px

Design Tokens

Value

None – 0

SM - 1

MD - 2

LG - 3

Token

var(--border-width-0)

var(--border-width-sm)

var(--border-width-md)

var(--border-width-lg)

NativeWind Config

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

Border Radius

Icons