Border Radius

Class	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 showcases various border radius values: 0.25rem, 0.5rem, and 0.75rem. The element will have slightly rounded corners, moderately rounded corners, and more pronounced rounded corners, respectively.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-indigo dim-16 rad-1"></div>
  <div class="bg-indigo dim-16 rad-2"></div>
  <div class="bg-indigo dim-16 rad-3"></div>
</div>

Bottom Left Radius

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

Class	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%;

<div class="bg-indigo dim-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.

Class	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 dim-16 rad-br-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.

Class	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 dim-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.

Class	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 dim-16 rad-tr-2"></div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>