Border Radius
Utilities for controlling the border radius of an element.
| Class | Properties |
|---|---|
| rounded-none | border-radius: 0px; |
| rounded-3xs | border-radius: 2px; |
| rounded-2xs | border-radius: 4px; |
| rounded | border-radius: 6px; |
| rounded-xs | border-radius: 6px; |
| rounded-sm | border-radius: 8px; |
| rounded-md | border-radius: 10px; |
| rounded-lg | border-radius: 12px; |
| rounded-xl | border-radius: 14px; |
| rounded-2xl | border-radius: 16px; |
| rounded-3xl | border-radius: 20px; |
| rounded-circle | border-radius: 50%; |
| rounded-pill | border-radius: 99rem; |
| rounded-full | border-radius: 9999px; |
Rounded corners
Use utilities like rounded-sm, rounded, or rounded-3xl to apply different border radius sizes to an element.
html
<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-3xl ..."></div>
<div class="rounded-full ..."></div>Pill buttons
Use utilities like rounded-circle, rounded-pill or rounded-full to create pill buttons.
html
<button class="rounded-circle size-8 ..."></button>
<button class="rounded-pill ...">Save Changes</button>
<button class="rounded-full ...">Save Changes</button>No rounding
Use rounded-none to remove an existing border radius from an element.
html
<button class="rounded-none ...">Save Changes</button>This is most commonly used to remove a border radius that was applied at a smaller breakpoint.