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.

rounded--none
rounded--xsmall
rounded--small
rounded
rounded--medium
rounded--large
rounded--xlarge
rounded--xxlarge
rounded--full
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).

rounded-tl--large
rounded-tr--large
rounded-bl--large
rounded-br--large
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).

rounded-t--large
rounded-r--large
rounded-b--large
rounded-l--large
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.

rounded--[3px]
rounded--[8px]
rounded--[12px]
rounded--[18px]
rounded--[24px]
rounded--[32px]
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>