Contents
Use the border radius utilities to easily round an element corners.
| Class | Properties |
|---|---|
.rounded | border-radius: 0.25rem; /* 4px */ |
.rounded-0 | border-radius: 0; |
.rounded-1 | border-radius: 0.125rem; /* 2px */ |
.rounded-2 | border-radius: 0.25rem; /* 4px */ |
.rounded-3 | border-radius: 0.5rem; /* 8px */ |
.rounded-4 | border-radius: 0.75rem; /* 12px */ |
.rounded-5 | border-radius: 1rem; /* 16px */ |
.rounded-circle | border-radius: 50%; |
.rounded-pill | border-radius: 50rem; /* 800px */ |
.rounded-top | border-top-left-radius: 0.25rem; /* 4px */ border-top-right-radius: 0.25rem; /* 4px */ |
.rounded-top-0 | border-top-left-radius: 0; border-top-right-radius: 0; |
.rounded-top-1 | border-top-left-radius: 0.125rem; /* 2px */ border-top-right-radius: 0.125rem; /* 2px */ |
.rounded-top-2 | border-top-left-radius: 0.25rem; /* 4px */ border-top-right-radius: 0.25rem; /* 4px */ |
.rounded-top-3 | border-top-left-radius: 0.5rem; /* 8px */ border-top-right-radius: 0.5rem; /* 8px */ |
.rounded-top-4 | border-top-left-radius: 0.75rem; /* 12px */ border-top-right-radius: 0.75rem; /* 12px */ |
.rounded-top-5 | border-top-left-radius: 1rem; /* 16px */ border-top-right-radius: 1rem; /* 16px */ |
.rounded-end | border-top-right-radius: 0.25rem; /* 4px */ border-bottom-right-radius: 0.25rem; /* 4px */ |
.rounded-end-0 | border-top-right-radius: 0; border-bottom-right-radius: 0; |
.rounded-end-1 | border-top-right-radius: 0.125rem; /* 2px */ border-bottom-right-radius: 0.125rem; /* 2px */ |
.rounded-end-2 | border-top-right-radius: 0.25rem; /* 4px */ border-bottom-right-radius: 0.25rem; /* 4px */ |
.rounded-end-3 | border-top-right-radius: 0.5rem; /* 8px */ border-bottom-right-radius: 0.5rem; /* 8px */ |
.rounded-end-4 | border-top-right-radius: 0.75rem; /* 12px */ border-bottom-right-radius: 0.75rem; /* 12px */ |
.rounded-end-5 | border-top-right-radius: 1rem; /* 16px */ border-bottom-right-radius: 1rem; /* 16px */ |
.rounded-bottom | border-bottom-right-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
.rounded-bottom-0 | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
.rounded-bottom-1 | border-bottom-right-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */ |
.rounded-bottom-2 | border-bottom-right-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
.rounded-bottom-3 | border-bottom-right-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */ |
.rounded-bottom-4 | border-bottom-right-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */ |
.rounded-bottom-5 | border-bottom-right-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */ |
.rounded-start | border-bottom-left-radius: 0.25rem; /* 4px */ border-top-left-radius: 0.25rem; /* 4px */ |
.rounded-start-0 | border-bottom-left-radius: 0; border-top-left-radius: 0; |
.rounded-start-1 | border-bottom-left-radius: 0.125rem; /* 2px */ border-top-left-radius: 0.125rem; /* 2px */ |
.rounded-start-2 | border-bottom-left-radius: 0.25rem; /* 4px */ border-top-left-radius: 0.25rem; /* 4px */ |
.rounded-start-3 | border-bottom-left-radius: 0.5rem; /* 8px */ border-top-left-radius: 0.5rem; /* 8px */ |
.rounded-start-4 | border-bottom-left-radius: 0.75rem; /* 12px */ border-top-left-radius: 0.75rem; /* 12px */ |
.rounded-start-5 | border-bottom-left-radius: 1rem; /* 16px */ border-top-left-radius: 1rem; /* 16px */ |
Basic usage
Rounded corners
Use utilities like .rounded-3, .rounded, or .rounded-circle to apply different border radius sizes to an element.
rounded
rounded-3
rounded-4
rounded-circle
<div class="rounded ..."></div>
<div class="rounded-3 ..."></div>
<div class="rounded-4 ..."></div>
<div class="rounded-circle ..."></div>
Pill buttons
Use the rounded-pill utility to create pill buttons.
rounded-pill
<button class="rounded-pill ...">Save Changes</button>
No rounding
Use rounded-0 to remove an existing border radius from an element.
rounded-0
<button class="rounded-0 ...">Save Changes</button>
Rounding sides separately
Use rounded-{top|end|bottom|start}{-size?} to only round one side of an element. Sizes range from 0 to 5 by default.
rounded-top-3
rounded-end-3
rounded-bottom-3
rounded-start-3
<div class="rounded-top-3 ..."></div>
<div class="rounded-end-3 ..."></div>
<div class="rounded-bottom-3 ..."></div>
<div class="rounded-start-3 ..."></div>
Edit this page on Github
Last updated on April 6, 2024