What is border radius in UX design?
Border radius is the visual property that determines how rounded the corners of an interface element appear. In CSS, border-radius accepts values from 0, which produces perfectly square corners, to a value large enough to produce a fully circular or pill-shaped element. Border radius is one of the most immediately recognizable visual characteristics of an interface: sharp corners convey precision, professionalism, and formality. Rounded corners convey friendliness, approachability, and modernity. Pill-shaped elements with fully rounded ends feel playful and contemporary.
How does border radius affect interface personality?
Border radius is a surprisingly powerful signal of brand personality. Financial and legal products historically favored sharp corners to communicate seriousness and precision. Consumer technology products since the iOS era have adopted rounded corners as the default, to the point where fully square corners now read as a deliberate stylistic choice rather than a default. The degree of rounding creates a spectrum from formal to casual: a 2px radius is nearly imperceptible and formal, 8px is comfortable and contemporary, 16px is clearly rounded and friendly, and a pill shape is playful and casual. Consistency in border radius across all elements is important for consistency: mixing sharp and rounded elements within the same interface creates visual tension without intentional contrast.
How does border radius relate to design tokens?
Border radius values are typically stored as design tokens in a design system, creating a defined set of radius options rather than allowing arbitrary values. Common token sets define small, medium, large, and full radius values that designers select from rather than entering custom values for each element. Storing border radius as tokens ensures consistency across the interface and makes system-wide changes possible by updating a single token value rather than manually updating individual components.