Border

Border radius and width tokens for UI elements

Borders visually delineate the edges of user interface (UI) elements like buttons, cards, and images. They can be customized with radius, width, and style.

By softening the visual appearance, elements with a higher border radius become more approachable and user-friendly.

Border Radius

Our responsive design system utilizes the following radius variables.

Name	Size	Visual
XS	4px
S	8px
M	16px
L	32px
Pill	999px
Circle Use 50% directly in CSS	50%

Border Width

Border width refers to the thickness of borders and determines how thin or thick the lines appear.

Name	Size	Visual
XS	1px	1px
S	1.5px	1.5px
M	2px	2px
L	4px	4px
XL	8px	8px

Usage in Code

Accessing Border Tokens

// Border Radius
const Container = styled.div`
  border-radius: ${props => props.theme.radius.m}; // 16px
  border-radius: ${props => props.theme.radius.pill}; // 999px
  border-radius: 50%; // Circle (use 50% directly)
`

// Border Width
const Card = styled.div`
  border: ${props => props.theme.border.width.xs} solid #ccc; // 1px
  border: ${props => props.theme.border.width.m} solid #ccc; // 2px
  border: ${props => props.theme.border.width.xl} solid #ccc; // 8px
`

// Combined Example
const Button = styled.button`
  border-radius: ${props => props.theme.radius.pill};
  border: ${props => props.theme.border.width.m} solid ${props => props.theme.brand[500]};
  padding: ${props => props.theme.spacing.m} ${props => props.theme.spacing.xl};
`

Best Practices

• Use border tokens instead of hardcoded pixel values

• Choose XS-S radius for subtle rounding on inputs and small elements

• Use M-L radius for cards and prominent UI elements

• Use Pill for buttons and tags that need fully rounded sides

• Use Circle (50%) for avatars and icon containers

• Use XS border width (1px) for subtle dividers and card borders

• Use M-L border width (2-4px) for emphasis and focus states

• Use XL border width (8px) for high-emphasis decorative borders

Examples

XS Radius

Subtle corners (4px)

M Radius

Cards & containers (16px)

Button

Pill Radius

Buttons & tags (999px)

Circle

Avatars & icons (50%)