Border Radius

Utility	Properties
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

<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
Failed to load data. Please try again later.

<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
Failed to load data. Please try again later.

<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
Failed to load data. Please try again later.

<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
Failed to load data. Please try again later.

<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>