Border Radius

Round widget corners with predefined size keys or arbitrary pixel values.

• Basic Usage
• Quick Reference
• Arbitrary Values
• Responsive Design
• Customizing Theme
• Related Documentation

WContainer(
  className: 'border-2 border-red-500 rounded-lg p-4',
  child: WText('Rounded Border', className: 'text-blue-500'),
)

Basic Usage

Use the rounded- prefix followed by a size key to clip a widget's corners:

WContainer(
  className: 'bg-blue-500 rounded-md p-4',
  child: WText('Medium radius', className: 'text-white'),
)

WContainer(
  className: 'bg-indigo-600 rounded-full p-4',
  child: WText('Pill shape', className: 'text-white'),
)

Note: rounded-* applies actual clipping via ClipRRect, so child content is physically clipped to the border radius.

Quick Reference

Syntax

rounded-[size]

Size keys resolve through the REM factor. The default pixel factor is 4 and the REM factor is pixelFactor * 4 = 16:

Arbitrary Values

Set any pixel radius with bracket notation. The value is used directly as pixels:

rounded-[]

WContainer(
  className: 'border-2 border-red-500 rounded-[6] p-4',
  child: WText('Custom Rounded Border', className: 'text-blue-500'),
)

WContainer(
  className: 'bg-green-400 rounded-[20] p-4',
  child: WText('20px radius', className: 'text-white'),
)

Responsive Design

Apply different radius values at different breakpoints:

WContainer(
  className: 'rounded-sm md:rounded-lg lg:rounded-2xl p-4 bg-blue-100',
  child: WText('Breakpoint radius'),
)

Customizing Theme

Override any radius key or add new ones with WindTheme.setRoundedSize:

// Set rounded-lg to a custom REM value
WindTheme.setRoundedSize('lg', 0.75);
// new px = 0.75 * remFactor (default 16) = 12px

// Add a brand-specific key
WindTheme.setRoundedSize('card', 0.625);
// rounded-card = 0.625 * 16 = 10px
WContainer(className: 'rounded-card bg-white p-4', ...)

See Customizing Rounded Corners for details.

Related Documentation

• Border Width — control border thickness.
• Border Color — apply color to borders.
• Customizing Rounded Corners — override the default radius scale.
• Pixel Factor — how the pixel and REM factors affect sizing.