Rounded
The Rounded system provides consistent border radius values for creating smooth corners on elements. It offers predefined sizes, corner-specific controls, and custom values to maintain visual consistency throughout your interface.
Base Sizes
The rounded system includes nine predefined sizes, from none to full. These standardized radii help maintain consistent corner rounding across your application's components.
Standard Rounded
Use rounded--none for sharp corners,
rounded for default rounding, and larger
variants for more pronounced curves.
Predefined Rounded
Design System
<!-- Available rounded sizes from sharp to pill -->
<div class="rounded--none">...</div> <!-- 0px -->
<div class="rounded--xsmall">...</div> <!-- 5px -->
<div class="rounded--small">...</div> <!-- 7px -->
<div class="rounded">...</div> <!-- 10px (default) -->
<div class="rounded--medium">...</div> <!-- 15px -->
<div class="rounded--large">...</div> <!-- 20px -->
<div class="rounded--xlarge">...</div> <!-- 25px -->
<div class="rounded--xxlarge">...</div> <!-- 30px -->
<div class="rounded--full">...</div> <!-- 9999px (pill shape) -->Corner-Specific Rounding
Apply border radius to specific corners or sides of an element. This allows for more complex shapes and asymmetric designs while maintaining consistency.
Individual Corners
Target specific corners with rounded-{corner}{-size} where
corner can be tl (top-left), tr (top-right), br (bottom-right), or bl (bottom-left).
Corner-Specific Rounding
Design System
Side Rounding
Round entire sides with rounded-{side}{-size} where
side can be t (top), r (right), b (bottom), or l (left).
Side Rounding
Design System
<!-- Individual corners -->
<div class="rounded-tl--large">Top left corner</div>
<div class="rounded-tr--large">Top right corner</div>
<div class="rounded-br--large">Bottom right corner</div>
<div class="rounded-bl--large">Bottom left corner</div>
<!-- Entire sides -->
<div class="rounded-t--large">Top corners</div>
<div class="rounded-r--large">Right corners</div>
<div class="rounded-b--large">Bottom corners</div>
<div class="rounded-l--large">Left corners</div>Bit Depth Classes
Control border radius based on display bit depth. These classes allow you to apply different rounded values for different display capabilities.
| Class | Description | Applies To |
|---|---|---|
| 1bit:{rounded-class} | Apply any rounded class on 1-bit displays only | 1-bit displays |
| 4bit:{rounded-class} | Apply any rounded class on 4-bit displays and higher | 4-bit, 24-bit displays |
| 24bit:{rounded-class} | Apply any rounded class on 24-bit displays only | 24-bit displays |
<!-- Different rounding for different bit depths -->
<div class="rounded--none 1bit:rounded--sm 4bit:rounded--xl">
<!-- Sharp on default, subtle on monochrome, pronounced on grayscale/color -->
</div>
<!-- Responsive corner rounding -->
<div class="1bit:rounded--none 24bit:rounded--full">
<!-- Sharp corners on monochrome, pill shape on full color -->
</div>Custom Values
When predefined rounded values don't meet your specific needs, you can use custom pixel values. This provides precise control over border radius while maintaining the consistent rounded syntax.
Arbitrary Pixel Values
Use rounded--[Npx] syntax to specify
exact pixel values for border radius.
Custom Pixel Rounded
Design System
<!-- Custom rounded values -->
<div class="rounded--[3px]">...</div>
<div class="rounded--[8px]">...</div>
<div class="rounded--[12px]">...</div>
<div class="rounded--[24px]">...</div>
<!-- Works with corner-specific too -->
<div class="rounded-t--[16px]">...</div>