Border Radius
Controls the radius of the borders of an element.
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 | Failed to load data. Please try again later. |
---|
<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.
<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>