Components
Border Radius
Border radius is how much the four corners of a rectangular element are rounded off, from sharp corners at zero to a fully rounded pill at high values.
Definition
Border radius controls how much you round off the four corners of a rectangular element. At a value of 0 the corners stay sharp and crisp; as you raise the value, they curl inward and soften. Push the value high enough — say, past half the element's height — and both ends round completely into a pill shape. The very same button or card can feel firm and serious or soft and friendly depending on this single number. That is why radius shapes the personality of a product just as much as color or typeface does.
Why does it matter?
Border radius decides the gut feeling a user gets the instant they look at the screen, before they read a word. Sharp corners read as precise, technical, and weighty, which suits places where trust matters most, like finance apps or admin dashboards. Rounded corners feel soft and approachable, so they show up often in consumer apps and playful, lighthearted services. What matters even more is consistency. If a button is barely rounded, a card is heavily rounded, and an input stays sharp all on the same screen, users can't put the difference into words but they sense that something is untidy. Settling on just a few fixed radius values makes that subtle clutter disappear, and suddenly your different screens and elements feel like they belong to one coherent product. A single small number quietly tunes both the tone of trust and the polish of your interface — it carries far more weight than it first appears.
Common mistakes
- Giving every element its own random radius. When the button is 6, the card is 12, and the badge is 20 with no rule behind them, the whole screen feels faintly restless and loses its sense of unity. Pick a few values up front and only choose from within that set — it reads as far more stable.
- Rounding an outer container and its inner content by unrelated amounts. When a card has rounded corners but the image inside stays sharp, an awkward gap appears at each corner. Give the inner element a slightly smaller radius than the outer one and the two curves nest together naturally.
- Applying a huge radius to a tiny element. A short button with a large value is already fully rounded into a pill, so cranking it higher changes nothing and only makes the shape look mushy. Scale the value to the size of the element to get the shape you actually intended.
Practical tips
- Decide your radius values ahead of time and reuse them across the product. Fix a value per role — say, 8 for buttons and 14 for cards — and every new screen stays consistent without any second-guessing. Managing these fixed values as tokens makes it even easier.
- Save the fully rounded pill shape for small, repeating elements like tags, filter chips, and toggles. Slapping a pill radius on a large surface such as a content card exaggerates the shape and reads as distracting instead.
- Match the size of the value to the personality you're after. Go small for a serious, technical feel and larger for a friendly, soft one — that's the baseline to start from.