Border Radius

Border radius tokens provide consistent rounded corners across your application. Use them to customize component styling while maintaining design system consistency.

Available Radius Values

Seven radius levels from subtle to fully rounded, plus special values for sharp corners and circular elements.

Special Values

// Standard radius values
<div className="rounded-cn-1">Smallest radius</div>
<div className="rounded-cn-2">Default radius</div>
<div className="rounded-cn-3">Standard radius</div>

// Special values
<div className="rounded-cn-none">Sharp corners</div>
<div className="rounded-cn-full">Circular or pill shape</div>

Directional Radius

Apply radius to specific corners using directional modifiers:

// Top corners
<div className="rounded-t-cn-3">Rounded top</div>

// Bottom corners
<div className="rounded-b-cn-3">Rounded bottom</div>

// Left corners
<div className="rounded-l-cn-3">Rounded left</div>

// Right corners
<div className="rounded-r-cn-3">Rounded right</div>

// Individual corners
<div className="rounded-tl-cn-3">Top-left</div>
<div className="rounded-tr-cn-3">Top-right</div>
<div className="rounded-bl-cn-3">Bottom-left</div>
<div className="rounded-br-cn-3">Bottom-right</div>

Common Customization Patterns

Button Variants

<Button className="rounded-cn-full">Pill-shaped button</Button>
<Button className="rounded-cn-1">Less rounded button</Button>

Card Customization

// Softer card edges
<div className="bg-cn-1 rounded-cn-5 shadow-cn-2 p-cn-lg">
  Content
</div>

// Sharp corners
<div className="bg-cn-1 rounded-cn-none shadow-cn-2 p-cn-lg">
  Content
</div>

Badge Styles

<span className="rounded-cn-full px-cn-md py-cn-xs">Pill badge</span>
<span className="rounded-cn-2 px-cn-md py-cn-xs">Default badge</span>

Usage Guidelines

When to use each radius:

• rounded-cn-px / rounded-cn-1 - Minimal rounding for subtle softening
• rounded-cn-2 - Default for most components (inputs, buttons, cards)
• rounded-cn-3 - Standard for larger containers and panels
• rounded-cn-(4 to 7) - Progressive rounding for special emphasis
• rounded-cn-full - Pills, badges, avatars, circular buttons
• rounded-cn-none - Sharp, modern aesthetic or specific design requirements

Default Radius Shorthand

The class name rounded (without a number) can be used to apply the default border radius (rounded-cn-2).

Best Practices

1. Be consistent - Use similar radius values for related components
2. Match component size - Larger components can handle larger radius values
3. Consider content - Sharp corners for technical/data-heavy UIs, rounded for friendly interfaces
4. Override sparingly - Only customize when the default doesn’t fit your use case
5. Test combinations - Ensure custom radius works with shadows and borders

Quick Reference

Class	Usage	Common For
rounded-cn-px	1px radius	Subtle softening
rounded-cn-1	Smallest	Technical UIs, minimal style
rounded-cn-2	Default	Buttons, inputs, small cards
rounded-cn-3	Standard	Cards, panels, containers
rounded-cn-(4 to 7)	Progressive	Special emphasis, large containers
rounded-cn-none	Sharp corners	Modern aesthetic
rounded-cn-full	Circular	Avatars, pills, badges