Border Radius

Controls the radius of the borders of an element.

Utility	Properties
rad-0	`border-radius: 0rem;`
rad-1	`border-radius: 0.25rem;`
rad-2	`border-radius: 0.5rem;`
rad-3	`border-radius: 0.75rem;`
rad-4	`border-radius: 1rem;`
rad-5	`border-radius: 1.25rem;`
rad-6	`border-radius: 1.5rem;`
rad-7	`border-radius: 1.75rem;`
rad-8	`border-radius: 2rem;`
rad-full	`border-radius: 100%;`
rad-half	`border-radius: 50%;`

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
rad-b-0	`border-bottom-left-radius: 0rem; border-bottom-right-radius: 0rem;`
rad-b-1	`border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;`
rad-b-2	`border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;`
rad-b-3	`border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem;`
rad-b-4	`border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;`
rad-b-5	`border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem;`
rad-b-6	`border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;`
rad-b-7	`border-bottom-left-radius: 1.75rem; border-bottom-right-radius: 1.75rem;`
rad-b-8	`border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem;`
rad-b-full	`border-bottom-left-radius: 100%; border-bottom-right-radius: 100%;`
rad-b-half	`border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;`

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
rad-bl-0	`border-bottom-left-radius: 0rem;`
rad-bl-1	`border-bottom-left-radius: 0.25rem;`
rad-bl-2	`border-bottom-left-radius: 0.5rem;`
rad-bl-3	`border-bottom-left-radius: 0.75rem;`
rad-bl-4	`border-bottom-left-radius: 1rem;`
rad-bl-5	`border-bottom-left-radius: 1.25rem;`
rad-bl-6	`border-bottom-left-radius: 1.5rem;`
rad-bl-7	`border-bottom-left-radius: 1.75rem;`
rad-bl-8	`border-bottom-left-radius: 2rem;`
rad-bl-full	`border-bottom-left-radius: 100%;`
rad-bl-half	`border-bottom-left-radius: 50%;`

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
rad-br-0	`border-bottom-right-radius: 0rem;`
rad-br-1	`border-bottom-right-radius: 0.25rem;`
rad-br-2	`border-bottom-right-radius: 0.5rem;`
rad-br-3	`border-bottom-right-radius: 0.75rem;`
rad-br-4	`border-bottom-right-radius: 1rem;`
rad-br-5	`border-bottom-right-radius: 1.25rem;`
rad-br-6	`border-bottom-right-radius: 1.5rem;`
rad-br-7	`border-bottom-right-radius: 1.75rem;`
rad-br-8	`border-bottom-right-radius: 2rem;`
rad-br-full	`border-bottom-right-radius: 100%;`
rad-br-half	`border-bottom-right-radius: 50%;`

<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
rad-l-0	`border-bottom-left-radius: 0rem; border-top-left-radius: 0rem;`
rad-l-1	`border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;`
rad-l-2	`border-bottom-left-radius: 0.5rem; border-top-left-radius: 0.5rem;`
rad-l-3	`border-bottom-left-radius: 0.75rem; border-top-left-radius: 0.75rem;`
rad-l-4	`border-bottom-left-radius: 1rem; border-top-left-radius: 1rem;`
rad-l-5	`border-bottom-left-radius: 1.25rem; border-top-left-radius: 1.25rem;`
rad-l-6	`border-bottom-left-radius: 1.5rem; border-top-left-radius: 1.5rem;`
rad-l-7	`border-bottom-left-radius: 1.75rem; border-top-left-radius: 1.75rem;`
rad-l-8	`border-bottom-left-radius: 2rem; border-top-left-radius: 2rem;`
rad-l-full	`border-bottom-left-radius: 100%; border-top-left-radius: 100%;`
rad-l-half	`border-bottom-left-radius: 50%; border-top-left-radius: 50%;`

<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
rad-r-0	`border-bottom-right-radius: 0rem; border-top-right-radius: 0rem;`
rad-r-1	`border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem;`
rad-r-2	`border-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem;`
rad-r-3	`border-bottom-right-radius: 0.75rem; border-top-right-radius: 0.75rem;`
rad-r-4	`border-bottom-right-radius: 1rem; border-top-right-radius: 1rem;`
rad-r-5	`border-bottom-right-radius: 1.25rem; border-top-right-radius: 1.25rem;`
rad-r-6	`border-bottom-right-radius: 1.5rem; border-top-right-radius: 1.5rem;`
rad-r-7	`border-bottom-right-radius: 1.75rem; border-top-right-radius: 1.75rem;`
rad-r-8	`border-bottom-right-radius: 2rem; border-top-right-radius: 2rem;`
rad-r-full	`border-bottom-right-radius: 100%; border-top-right-radius: 100%;`
rad-r-half	`border-bottom-right-radius: 50%; border-top-right-radius: 50%;`

<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
rad-tl-0	`border-top-left-radius: 0rem;`
rad-tl-1	`border-top-left-radius: 0.25rem;`
rad-tl-2	`border-top-left-radius: 0.5rem;`
rad-tl-3	`border-top-left-radius: 0.75rem;`
rad-tl-4	`border-top-left-radius: 1rem;`
rad-tl-5	`border-top-left-radius: 1.25rem;`
rad-tl-6	`border-top-left-radius: 1.5rem;`
rad-tl-7	`border-top-left-radius: 1.75rem;`
rad-tl-8	`border-top-left-radius: 2rem;`
rad-tl-full	`border-top-left-radius: 100%;`
rad-tl-half	`border-top-left-radius: 50%;`

<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
rad-tr-0	`border-top-right-radius: 0rem;`
rad-tr-1	`border-top-right-radius: 0.25rem;`
rad-tr-2	`border-top-right-radius: 0.5rem;`
rad-tr-3	`border-top-right-radius: 0.75rem;`
rad-tr-4	`border-top-right-radius: 1rem;`
rad-tr-5	`border-top-right-radius: 1.25rem;`
rad-tr-6	`border-top-right-radius: 1.5rem;`
rad-tr-7	`border-top-right-radius: 1.75rem;`
rad-tr-8	`border-top-right-radius: 2rem;`
rad-tr-full	`border-top-right-radius: 100%;`
rad-tr-half	`border-top-right-radius: 50%;`

<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
rad-t-0	`border-top-left-radius: 0rem; border-top-right-radius: 0rem;`
rad-t-1	`border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;`
rad-t-2	`border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;`
rad-t-3	`border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;`
rad-t-4	`border-top-left-radius: 1rem; border-top-right-radius: 1rem;`
rad-t-5	`border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem;`
rad-t-6	`border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;`
rad-t-7	`border-top-left-radius: 1.75rem; border-top-right-radius: 1.75rem;`
rad-t-8	`border-top-left-radius: 2rem; border-top-right-radius: 2rem;`
rad-t-full	`border-top-left-radius: 100%; border-top-right-radius: 100%;`
rad-t-half	`border-top-left-radius: 50%; border-top-right-radius: 50%;`

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

Using Percentages

This example showcases various border-radius utilities:

The rad-full utility sets the border radius to 100%, creating a fully rounded element (e.g., a perfect circle for square elements).
The rad-half utility sets the border radius to 50%, creating a circular or pill-shaped element depending on the aspect ratio.

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 modifiers

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

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

Hover modifiers

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

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