Border Radius

Controls the radius of the borders of an element.

Class	Properties
rad-0	border-radius: 0px;
rad-1	border-radius: 4px;
rad-2	border-radius: 8px;
rad-3	border-radius: 16px;
rad-4	border-radius: 24px;
rad-5	border-radius: 32px;
rad-6	border-radius: 40px;
rad-7	border-radius: 48px;
rad-8	border-radius: 56px;
rad-full	border-radius: 100%;
rad-half	border-radius: 50%;

<div class="d-g g-16 gtc-4">
  <div class="bg-cyan dim-16 fw-700 ins rad-0 tc-white">0rem</div>
  <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">8rem</div>
  <div class="bg-cyan dim-16 fw-700 ins rad-3 tc-white">16rem</div>
  <div class="bg-cyan dim-16 fw-700 ins rad-half tc-white">50%</div>
</div>

Bottom left

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

Class	Properties
rad-bl-0	border-bottom-left-radius: 0px;
rad-bl-1	border-bottom-left-radius: 4px;
rad-bl-2	border-bottom-left-radius: 8px;
rad-bl-3	border-bottom-left-radius: 16px;
rad-bl-4	border-bottom-left-radius: 24px;
rad-bl-5	border-bottom-left-radius: 32px;
rad-bl-6	border-bottom-left-radius: 40px;
rad-bl-7	border-bottom-left-radius: 48px;
rad-bl-8	border-bottom-left-radius: 56px;
rad-bl-full	border-bottom-left-radius: 100%;
rad-bl-half	border-bottom-left-radius: 50%;

<div class="bg-cyan dim-16 fw-700 ins rad-bl-2 tc-white">8rem</div>

Bottom right

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

Class	Properties
rad-br-0	border-bottom-right-radius: 0px;
rad-br-1	border-bottom-right-radius: 4px;
rad-br-2	border-bottom-right-radius: 8px;
rad-br-3	border-bottom-right-radius: 16px;
rad-br-4	border-bottom-right-radius: 24px;
rad-br-5	border-bottom-right-radius: 32px;
rad-br-6	border-bottom-right-radius: 40px;
rad-br-7	border-bottom-right-radius: 48px;
rad-br-8	border-bottom-right-radius: 56px;
rad-br-full	border-bottom-right-radius: 100%;
rad-br-half	border-bottom-right-radius: 50%;

<div class="bg-cyan dim-16 fw-700 ins rad-br-2 tc-white">8rem</div>

Top left

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

Class	Properties
rad-tl-0	border-top-left-radius: 0px;
rad-tl-1	border-top-left-radius: 4px;
rad-tl-2	border-top-left-radius: 8px;
rad-tl-3	border-top-left-radius: 16px;
rad-tl-4	border-top-left-radius: 24px;
rad-tl-5	border-top-left-radius: 32px;
rad-tl-6	border-top-left-radius: 40px;
rad-tl-7	border-top-left-radius: 48px;
rad-tl-8	border-top-left-radius: 56px;
rad-tl-full	border-top-left-radius: 100%;
rad-tl-half	border-top-left-radius: 50%;

<div class="bg-cyan dim-16 fw-700 ins rad-tl-2 tc-white">8rem</div>

Top right

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

Class	Properties
rad-tr-0	border-top-right-radius: 0px;
rad-tr-1	border-top-right-radius: 4px;
rad-tr-2	border-top-right-radius: 8px;
rad-tr-3	border-top-right-radius: 16px;
rad-tr-4	border-top-right-radius: 24px;
rad-tr-5	border-top-right-radius: 32px;
rad-tr-6	border-top-right-radius: 40px;
rad-tr-7	border-top-right-radius: 48px;
rad-tr-8	border-top-right-radius: 56px;
rad-tr-full	border-top-right-radius: 100%;
rad-tr-half	border-top-right-radius: 50%;

<div class="bg-cyan dim-16 fw-700 ins rad-tr-2 tc-white">8rem</div>

---

Using

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

Using

Using :hover variants such as h:rad-* allows you to override elements and change their values when hovering over them.

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