Customizing Rounded Corners

Manage corner radii through WindTheme: pre-defined sizes, arbitrary values, and runtime customization.

• Default Rounded Sizes
• Arbitrary Rounded Values
• Managing Rounded Sizes
• Practical Examples
• Related Documentation

WindTheme.setRoundedSize('custom', 1.25);
double size = WindTheme.getRoundedSize('xl'); // 0.75

Default Rounded Sizes

WindTheme ships pre-defined rounded sizes. Each value is in rem units; the calculated px values below assume the default rem factor (WindTheme.getRemFactor(), which is pixel factor × 4 = 16).

The px values are calculated as:

{px} = {rem} × {rem factor (16 by default)}

For example, rounded-lg results in 0.5 × 16 = 8px.

Arbitrary Rounded Values

For radii outside the scale, use the rounded-[value] syntax, where value is the desired radius in px.

• rounded-[7] applies a radius of 7px.
• rounded-[20] applies a radius of 20px.

Managing Rounded Sizes

WindTheme provides methods to check, retrieve, customize, and remove rounded sizes at runtime.

// Check whether a rounded size exists
bool exists = WindTheme.hasRoundedSize('lg');
print(exists); // Output: true

// Retrieve a rounded size value (in rem)
double size = WindTheme.getRoundedSize('xl');
print(size); // Output: 0.75

// Add a new size
WindTheme.setRoundedSize('4xl', 2);

// Update an existing size
WindTheme.setRoundedSize('lg', 0.6);

// Remove a rounded size
WindTheme.removeRoundedSize('sm');

Practical Examples

Pre-defined Sizes

WContainer(
  className: 'rounded-xl bg-gray-100 dark:bg-gray-800',
  child: WText('Pre-defined rounded corners'),
);

This applies a corner radius of 12px (0.75 × 16).

Arbitrary Values

WContainer(
  className: 'rounded-[15] bg-gray-200 dark:bg-gray-700',
  child: WText('Arbitrary rounded corners'),
);

This applies a corner radius of 15px.

Custom Sizes

// Add a custom size
WindTheme.setRoundedSize('custom', 1.25); // Adds 'rounded-custom'

// Use the custom size
WContainer(
  className: 'rounded-custom bg-gray-300 dark:bg-gray-600',
  child: WText('Custom rounded corners'),
);

// Remove the custom size
WindTheme.removeRoundedSize('custom');

Related Documentation

• Border Radius — apply radii with rounded-*
• Pixel Factor — how the rem factor scales sizes
• Shadows — customize shadow sizes