Radius

A pre-defined and limited radius system for consistent, predictable rounding across your UI. MihrRadius provides both raw double values and pre-built BorderRadius constants.

All values derive from the primitive spacing scale, keeping radius proportional to the rest of the design system.

Radius scale11 tokens

Visual preview of each radius applied to a 64px box.

radius-none

radius-xxs

radius-xs

radius-sm

radius-md

radius-lg

radius-xl

radius-2xl

radius-3xl

radius-4xl

radius-full

Name	Size	Pixels
`radius-none`	0rem	0px
`radius-xxs`	0.125rem	2px
`radius-xs`	0.25rem	4px
`radius-sm`	0.375rem	6px
`radius-md`	0.5rem	8px
`radius-lg`	0.625rem	10px
`radius-xl`	0.75rem	12px
`radius-2xl`	1rem	16px
`radius-3xl`	1.25rem	20px
`radius-4xl`	1.5rem	24px
`radius-full`	∞	9999px

Top-only radius

For bottom sheets and modal-like surfaces, MihrRadius provides top-only variants that only round the top corners:

Token	Top radius	Preview
`MihrRadius.topXxl`	16px
`MihrRadius.topXxxl`	20px
`MihrRadius.topXxxxl`	24px

Usage

Use the BorderRadius constants directly in your widgets:

Dart

Container(
  decoration: BoxDecoration(
    borderRadius: MihrRadius.borderXl, // 12px all corners
    color: Colors.white,
  ),
);

// Top-only for bottom sheets
Container(
  decoration: BoxDecoration(
    borderRadius: MihrRadius.topXxxl, // 20px top only
    color: Colors.white,
  ),
);

// Raw double for custom use
final value = MihrRadius.md; // 8.0