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

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

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" }
  }
}

Contextual Radius

Larger elements often need proportionally larger radius. Consider semantic tokens:

CSS with contextual tokens:

:root {
  /* Base scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Semantic/contextual */
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-modal: var(--radius-xl);
  --radius-badge: var(--radius-full);
  --radius-avatar: var(--radius-full);
}

Algorithm

The scale uses exponential growth from a base:

value = baseValue * (ratio ^ (step - midpoint))

For a 7-step scale with base 8px and ratio 2:

• Step 0 (3 below): 8 * 2^-3 = 1px
• Step 3 (mid): 8 * 2^0 = 8px
• Step 6 (3 above): 8 * 2^3 = 64px

Values are typically rounded to clean numbers.

Design Considerations

Consistency rule: Inner radius = outer radius - border/padding

/* Card with nested element */
.card {
  border-radius: var(--radius-lg); /* 16px */
  padding: 8px;
}
.card-inner {
  border-radius: calc(var(--radius-lg) - 8px); /* 8px */
}

Squircle alternative: For iOS-style continuous curves, consider mask-image with SVG or libraries like squircle.js.

Common Patterns