radius-scale

Radius Scale Generator

Overview

Generate consistent border-radius scales from sharp to pill-shaped. Creates harmonious rounding that scales appropriately with element size for visual consistency.

When to Use

• Setting up radius tokens for a new project
• Standardizing corner rounding across components
• Creating button/card/input styling consistency
• Building component-size-aware radius systems

Quick Reference

Level	Typical Value	Use Case
none	0	Sharp corners, tables
sm	2-4px	Subtle rounding, inputs
md	6-8px	Buttons, cards
lg	12-16px	Modals, large cards
xl	20-24px	Panels, containers
2xl	32px+	Feature sections
full	9999px	Pills, avatars, badges

The Process

1. Get base radius: Default 8px (balanced starting point)
2. Get ratio: How much each step grows (1.5-2 typical)
3. Ask steps: How many radius values (5-7 typical)
4. Ask unit: px or rem?
5. Ask format: CSS, Tailwind, or JSON?
6. Include full?: Add "full" (9999px) for pills? (default: yes)
7. Generate: Create scale centered on base

Common Scales

Character	Base	Ratio	Result
Subtle	4px	1.5	2, 3, 4, 6, 9, 13
Balanced	8px	2	2, 4, 8, 16, 32
Rounded	12px	1.5	5, 8, 12, 18, 27, 40
Soft	16px	1.5	7, 11, 16, 24, 36, 54

Output Formats

CSS Custom Properties:

:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
}

Tailwind Config:

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '4px',
      'md': '8px',
      'lg': '16px',
      'xl': '24px',
      '2xl': '32px',
      'full': '9999px',
    }
  }
}

JSON Tokens:

{
  "radius": {
    "none": { "value": "0" },
    "sm": { "value": "4px" },
    "md": { "value": "8px" },
    "lg": { "value": "16px" },
    "xl": { "value": "24px" },
    "2xl": { "value": "32px" },
    "full": { "value": "9999px" }
  }
}