Border Radius
Utilities for controlling an element's border radius.
All Corners #
Use d-bar{n} to change the border radius on all corners of your element.
<div class="d-bar0">...</div>
<div class="d-bar1">...</div>
<div class="d-bar2">...</div>
<div class="d-bar4">...</div>
<div class="d-bar8">...</div>
<div class="d-bar12">...</div>
<div class="d-bar16">...</div>
<div class="d-bar24">...</div>
<div class="d-bar32">...</div>
Rounded Sides #
Use d-b{t|r|b|l}r{n} to change the border radius on a side of your element.
<div class="d-btr4">...</div>
<div class="d-brr8">...</div>
<div class="d-bbr12">...</div>
<div class="d-blr16">...</div>
Pills #
Use d-b{a|t|r|b|l}r-pill to change the border radius of your element to a pill shape.
<div class="d-bar-pill">...</div>
Circles #
Use d-b{a|t|r|b|l}r-circle to change the border radius of your element to a circle shape.
<div class="d-bar-circle">...</div>
Classes #
Class
|
Output
|
|---|---|
| .d-bar-unset | border-radius: unset !important; |
| .d-bar0 | border-radius: var(--dt-size-radius-0) !important; |
| .d-bar1 | border-radius: var(--dt-size-radius-100) !important; |
| .d-bar2 | border-radius: var(--dt-size-radius-200) !important; |
| .d-bar4 | border-radius: var(--dt-size-radius-300) !important; |
| .d-bar8 | border-radius: var(--dt-size-radius-400) !important; |
| .d-bar12 | border-radius: var(--dt-size-radius-450) !important; |
| .d-bar16 | border-radius: var(--dt-size-radius-500) !important; |
| .d-bar24 | border-radius: var(--dt-size-550) !important; |
| .d-bar32 | border-radius: var(--dt-size-radius-600) !important; |
| .d-bar-circle | border-radius: var(--dt-size-radius-circle) !important; |
| .d-bar-pill | border-radius: var(--dt-size-radius-pill) !important; |
| .d-btr0 |
border-top-left-radius: var(--dt-size-radius-0) !important; border-top-right-radius: var(--dt-size-radius-0) !important; |
| .d-btr1 |
border-top-left-radius: var(--dt-size-radius-100) !important; border-top-right-radius: var(--dt-size-radius-100) !important; |
| .d-btr2 |
border-top-left-radius: var(--dt-size-radius-200) !important; border-top-right-radius: var(--dt-size-radius-200) !important; |
| .d-btr4 |
border-top-left-radius: var(--dt-size-radius-300) !important; border-top-right-radius: var(--dt-size-radius-300) !important; |
| .d-btr8 |
border-top-left-radius: var(--dt-size-radius-400) !important; border-top-right-radius: var(--dt-size-radius-400) !important; |
| .d-btr12 |
border-top-left-radius: var(--dt-size-radius-450) !important; border-top-right-radius: var(--dt-size-radius-450) !important; |
| .d-btr16 |
border-top-left-radius: var(--dt-size-radius-500) !important; border-top-right-radius: var(--dt-size-radius-500) !important; |
| .d-btr24 |
border-top-left-radius: var(--dt-size-550) !important; border-top-right-radius: var(--dt-size-550) !important; |
| .d-btr32 |
border-top-left-radius: var(--dt-size-radius-600) !important; border-top-right-radius: var(--dt-size-radius-600) !important; |
| .d-btr-circle |
border-top-left-radius: var(--dt-size-radius-circle) !important; border-top-right-radius: var(--dt-size-radius-circle) !important; |
| .d-btr-pill |
border-top-left-radius: var(--dt-size-radius-pill) !important; border-top-right-radius: var(--dt-size-radius-pill) !important; |
| .d-brr0 |
border-top-right-radius: var(--dt-size-radius-0) !important; border-bottom-right-radius: var(--dt-size-radius-0) !important; |
| .d-brr1 |
border-top-right-radius: var(--dt-size-radius-100) !important; border-bottom-right-radius: var(--dt-size-radius-100) !important; |
| .d-brr2 |
border-top-right-radius: var(--dt-size-radius-200) !important; border-bottom-right-radius: var(--dt-size-radius-200) !important; |
| .d-brr4 |
border-top-right-radius: var(--dt-size-radius-300) !important; border-bottom-right-radius: var(--dt-size-radius-300) !important; |
| .d-brr8 |
border-top-right-radius: var(--dt-size-radius-400) !important; border-bottom-right-radius: var(--dt-size-radius-400) !important; |
| .d-brr12 |
border-top-right-radius: var(--dt-size-radius-450) !important; border-bottom-right-radius: var(--dt-size-radius-450) !important; |
| .d-brr16 |
border-top-right-radius: var(--dt-size-radius-500) !important; border-bottom-right-radius: var(--dt-size-radius-500) !important; |
| .d-brr24 |
border-top-right-radius: var(--dt-size-550) !important; border-bottom-right-radius: var(--dt-size-550) !important; |
| .d-brr32 |
border-top-right-radius: var(--dt-size-radius-600) !important; border-bottom-right-radius: var(--dt-size-radius-600) !important; |
| .d-brr-circle |
border-top-right-radius: var(--dt-size-radius-circle) !important; border-bottom-right-radius: var(--dt-size-radius-circle) !important; |
| .d-brr-pill |
border-top-right-radius: var(--dt-size-radius-pill) !important; border-bottom-right-radius: var(--dt-size-radius-pill) !important; |
| .d-bbr0 |
border-bottom-left-radius: var(--dt-size-radius-0) !important; border-bottom-right-radius: var(--dt-size-radius-0) !important; |
| .d-bbr1 |
border-bottom-left-radius: var(--dt-size-radius-100) !important; border-bottom-right-radius: var(--dt-size-radius-100) !important; |
| .d-bbr2 |
border-bottom-left-radius: var(--dt-size-radius-200) !important; border-bottom-right-radius: var(--dt-size-radius-200) !important; |
| .d-bbr4 |
border-bottom-left-radius: var(--dt-size-radius-300) !important; border-bottom-right-radius: var(--dt-size-radius-300) !important; |
| .d-bbr8 |
border-bottom-left-radius: var(--dt-size-radius-400) !important; border-bottom-right-radius: var(--dt-size-radius-400) !important; |
| .d-bbr12 |
border-bottom-left-radius: var(--dt-size-radius-450) !important; border-bottom-right-radius: var(--dt-size-radius-450) !important; |
| .d-bbr16 |
border-bottom-left-radius: var(--dt-size-radius-500) !important; border-bottom-right-radius: var(--dt-size-radius-500) !important; |
| .d-bbr24 |
border-bottom-left-radius: var(--dt-size-550) !important; border-bottom-right-radius: var(--dt-size-550) !important; |
| .d-bbr32 |
border-bottom-left-radius: var(--dt-size-radius-600) !important; border-bottom-right-radius: var(--dt-size-radius-600) !important; |
| .d-bbr-circle |
border-bottom-left-radius: var(--dt-size-radius-circle) !important; border-bottom-right-radius: var(--dt-size-radius-circle) !important; |
| .d-bbr-pill |
border-bottom-left-radius: var(--dt-size-radius-pill) !important; border-bottom-right-radius: var(--dt-size-radius-pill) !important; |
| .d-blr0 |
border-bottom-left-radius: var(--dt-size-radius-0) !important;
border-top-left-radius: var(--dt-size-radius-0) !important; |
| .d-blr1 |
border-bottom-left-radius: var(--dt-size-radius-100) !important;
border-top-left-radius: var(--dt-size-radius-100) !important; |
| .d-blr2 |
border-bottom-left-radius: var(--dt-size-radius-200) !important;
border-top-left-radius: var(--dt-size-radius-200) !important; |
| .d-blr4 |
border-bottom-left-radius: var(--dt-size-radius-300) !important;
border-top-left-radius: var(--dt-size-radius-300) !important; |
| .d-blr8 |
border-bottom-left-radius: var(--dt-size-radius-400) !important;
border-top-left-radius: var(--dt-size-radius-400) !important; |
| .d-blr12 |
border-bottom-left-radius: var(--dt-size-radius-450) !important;
border-top-left-radius: var(--dt-size-radius-450) !important; |
| .d-blr16 |
border-bottom-left-radius: var(--dt-size-radius-500) !important;
border-top-left-radius: var(--dt-size-radius-500) !important; |
| .d-blr24 |
border-bottom-left-radius: var(--dt-size-550) !important;
border-top-left-radius: var(--dt-size-550) !important; |
| .d-blr32 |
border-bottom-left-radius: var(--dt-size-radius-600) !important;
border-top-left-radius: var(--dt-size-radius-600) !important; |
| .d-blr-circle |
border-bottom-left-radius: var(--dt-size-radius-circle) !important;
border-top-left-radius: var(--dt-size-radius-circle) !important; |
| .d-blr-pill |
border-bottom-left-radius: var(--dt-size-radius-pill) !important;
border-top-left-radius: var(--dt-size-radius-pill) !important; |