Border Radius

Utility	Properties
Error: 429

This example sets the border radius to 0.5rem. The element will have moderately rounded corners at the bottom.

<div class="bg-indigo d-16 rad-2"></div>

Bottom Radius

Controls the radius of the bottom borders of an element.

Utility	Properties
Error: 429

This example sets the bottom border radius to 0.5rem. The element will have moderately rounded corners at the bottom.

<div class="bg-indigo d-16 rad-b-2"></div>

Bottom Left Radius

Controls the radius of the bottom left border of an element.

Utility	Properties
Error: 429

This example sets the bottom left border radius to 0.5rem. The element will have moderately rounded corners at the bottom left.

<div class="bg-indigo d-16 rad-bl-2"></div>

Bottom Right Radius

This example sets the bottom right border radius to 0.5rem. The element will have moderately rounded corners at the bottom right.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-br-2"></div>

Left Radius

This example sets the left border radius to 0.5rem. The element will have moderately rounded corners at the left.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-l-2"></div>

Right Radius

This example sets the right border radius to 0.5rem. The element will have moderately rounded corners at the right.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-r-2"></div>

Top Left Radius

This example sets the top left border radius to 0.5rem. The element will have moderately rounded corners at the top left.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-tl-2"></div>

Top Right Radius

This example sets the top right border radius to 0.5rem. The element will have moderately rounded corners at the top right.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-tr-2"></div>

Top Radius

This example sets the top border radius to 0.5rem. The element will have moderately rounded corners at the top.

Utility	Properties
Error: 429

<div class="bg-indigo d-16 rad-t-2"></div>

Using Percentages

This example showcases various border-radius utilities:

• The rad-full utility applies a border-radius of 100% to an element.
• The rad-half utility applies a border-radius of 50% to an element.

100%

50%

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <div class="ai-c bg-indigo d-16 d-f jc-c rad-full tc-white">100%</div>
  <div class="ai-c bg-indigo d-16 d-f jc-c rad-half tc-white">50%</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="rad-1 md:rad-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="rad-1 h:rad-2 ..."></div>