Border Radius
Use border utilities to quickly style the border and border-radius of an element.
|
Class
|
Properties
|
|---|---|
| rounded | |
| rounded-1 | |
| rounded-2 | |
| rounded-3 | |
| rounded-4 | |
| rounded-5 | |
| rounded-6 | |
| rounded-7 | |
| rounded-8 | |
| rounded-9 | |
| rounded-10 | |
| rounded-pill | |
| rounded-circle | |
| rounded-card | |
| rounded-0 |
Roundness
Use border radius utilities to add or remove an element’s border radius like .rounded, .rounded-1, .rounded-2 or .rounded-circle.
<div class="rounded-1"></div>
<div class="rounded"></div>
<div class="rounded-2"></div>
<div class="rounded-3"></div>
<div class="rounded-4"></div>
<div class="rounded-5"></div>
Pill and circle
Use border radius utilities to add or remove an element’s border radius like .rounded, .rounded-sm, .rounded-lg or .rounded-circle.
<div class="rounded-pill"></div>
<div class="rounded-circle"></div>
Remove radius
Use border radius utilities to add or remove an element’s border radius like .rounded-0.
<div class="rounded-0"></div>
Responsive
Responsive variations also exist for each border radius value. Use the .rounded-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing border radius utility.
<div class="rounded-3 rounded-md-5 ..."></div>