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;
|
rad-b-1 | border-bottom-left-radius: 0.25rem;
|
rad-b-2 | border-bottom-left-radius: 0.5rem;
|
rad-b-3 | border-bottom-left-radius: 0.75rem;
|
rad-b-4 | border-bottom-left-radius: 1rem;
|
rad-b-5 | border-bottom-left-radius: 1.25rem;
|
rad-b-6 | border-bottom-left-radius: 1.5rem;
|
rad-b-7 | border-bottom-left-radius: 1.75rem;
|
rad-b-8 | border-bottom-left-radius: 2rem;
|
rad-b-full | border-bottom-left-radius: 100%;
|
rad-b-half | border-bottom-left-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;
|
rad-l-1 | border-bottom-left-radius: 0.25rem;
|
rad-l-2 | border-bottom-left-radius: 0.5rem;
|
rad-l-3 | border-bottom-left-radius: 0.75rem;
|
rad-l-4 | border-bottom-left-radius: 1rem;
|
rad-l-5 | border-bottom-left-radius: 1.25rem;
|
rad-l-6 | border-bottom-left-radius: 1.5rem;
|
rad-l-7 | border-bottom-left-radius: 1.75rem;
|
rad-l-8 | border-bottom-left-radius: 2rem;
|
rad-l-full | border-bottom-left-radius: 100%;
|
rad-l-half | border-bottom-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;
|
rad-r-1 | border-bottom-right-radius: 0.25rem;
|
rad-r-2 | border-bottom-right-radius: 0.5rem;
|
rad-r-3 | border-bottom-right-radius: 0.75rem;
|
rad-r-4 | border-bottom-right-radius: 1rem;
|
rad-r-5 | border-bottom-right-radius: 1.25rem;
|
rad-r-6 | border-bottom-right-radius: 1.5rem;
|
rad-r-7 | border-bottom-right-radius: 1.75rem;
|
rad-r-8 | border-bottom-right-radius: 2rem;
|
rad-r-full | border-bottom-right-radius: 100%;
|
rad-r-half | border-bottom-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;
|
rad-t-1 | border-top-left-radius: 0.25rem;
|
rad-t-2 | border-top-left-radius: 0.5rem;
|
rad-t-3 | border-top-left-radius: 0.75rem;
|
rad-t-4 | border-top-left-radius: 1rem;
|
rad-t-5 | border-top-left-radius: 1.25rem;
|
rad-t-6 | border-top-left-radius: 1.5rem;
|
rad-t-7 | border-top-left-radius: 1.75rem;
|
rad-t-8 | border-top-left-radius: 2rem;
|
rad-t-full | border-top-left-radius: 100%;
|
rad-t-half | border-top-left-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 applies a
border-radius
of 100% to an element. - The rad-half utility applies a
border-radius
of 50% to an element.
<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:rad-*
,md:rad-*
, lg:rad-*
, and xxl:rad-*
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:rad-*
utility to override elements and change their values when hovering over them.
<div class="rad-1 h:rad-2 ..."></div>