All Corners #
Use d-bar-{stop} to change the border radius on all four corners. The stop references the matching --dt-size-radius-{stop} token.
<div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-0"> <dt-text kind="code" size="xs">d-bar-0</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-100"><dt-text kind="code" size="xs">d-bar-100</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-200"><dt-text kind="code" size="xs">d-bar-200</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-300"><dt-text kind="code" size="xs">d-bar-300</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-350"><dt-text kind="code" size="xs">d-bar-350</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-400"><dt-text kind="code" size="xs">d-bar-400</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-450"><dt-text kind="code" size="xs">d-bar-450</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-500"><dt-text kind="code" size="xs">d-bar-500</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-550"><dt-text kind="code" size="xs">d-bar-550</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-600"><dt-text kind="code" size="xs">d-bar-600</dt-text></div>
Rounded Sides #
Use a side-pair class to round the two corners on a single side. Class roots are the first-letter compression of the matching CSS logical property.
| Class root | CSS properties set | Visible in LTR |
|---|---|---|
d-bbsr-* | border-start-start-radius + border-start-end-radius | top |
d-bier-* | border-start-end-radius + border-end-end-radius | right |
d-bber-* | border-end-start-radius + border-end-end-radius | bottom |
d-bisr-* | border-start-start-radius + border-end-start-radius | left |
<div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bbsr-450"><dt-text kind="code" size="xs">d-bbsr-450</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bier-450"><dt-text kind="code" size="xs">d-bier-450</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bber-450"><dt-text kind="code" size="xs">d-bber-450</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bisr-450"><dt-text kind="code" size="xs">d-bisr-450</dt-text></div>
Individual Corners #
Use a single-corner class to round exactly one corner. Class roots match the CSS logical corner properties.
| Class root | CSS property set | Visible in LTR |
|---|---|---|
d-bssr-* | border-start-start-radius | top-left |
d-bser-* | border-start-end-radius | top-right |
d-beer-* | border-end-end-radius | bottom-right |
d-besr-* | border-end-start-radius | bottom-left |
<div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bssr-500"><dt-text kind="code" size="xs">d-bssr-500</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bser-500"><dt-text kind="code" size="xs">d-bser-500</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-beer-500"><dt-text kind="code" size="xs">d-beer-500</dt-text></div> <div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-besr-500"><dt-text kind="code" size="xs">d-besr-500</dt-text></div>
Pills #
Use d-bar-pill for a pill-shaped radius on all four corners. The same -pill suffix is available on every scope (d-bbsr-pill, d-bssr-pill, etc.).
<div class="d-p-100 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bar-pill"> <dt-text kind="code" size="xs">d-bar-pill</dt-text> </div>
Circles #
Use d-bar-circle for a fully circular radius. Best paired with a square element.
<dt-stack direction="row" align="center" justify="center" class="d-p-100 d-size-200 d-ba d-baw2 d-bc-default d-bgc-primary d-ws-nowrap d-bar-circle"> <dt-text kind="code" size="xs">d-bar-circle</dt-text> </dt-stack>
Reset #
Use d-bar-unset to reset the border-radius on all four corners to unset.
Classes #
Class
|
Output
|
REM
|
PX
|
|---|---|---|---|
| .d-bar-0 | border-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bar-100 | border-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bar-200 | border-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bar-300 | border-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bar-350 | border-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bar-400 | border-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bar-450 | border-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bar-500 | border-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bar-550 | border-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bar-600 | border-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bar-pill | border-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bar-circle | border-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
.d-bar0 Deprecated | border-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
.d-bar1 Deprecated | border-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
.d-bar2 Deprecated | border-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
.d-bar4 Deprecated | border-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
.d-bar6 Deprecated | border-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
.d-bar8 Deprecated | border-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
.d-bar12 Deprecated | border-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
.d-bar16 Deprecated | border-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
.d-bar24 Deprecated | border-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
.d-bar32 Deprecated | border-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bbsr-0 | border-start-start-radius: var(--dt-size-radius-0) !important; border-start-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bbsr-100 | border-start-start-radius: var(--dt-size-radius-100) !important; border-start-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bbsr-200 | border-start-start-radius: var(--dt-size-radius-200) !important; border-start-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bbsr-300 | border-start-start-radius: var(--dt-size-radius-300) !important; border-start-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bbsr-350 | border-start-start-radius: var(--dt-size-radius-350) !important; border-start-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bbsr-400 | border-start-start-radius: var(--dt-size-radius-400) !important; border-start-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bbsr-450 | border-start-start-radius: var(--dt-size-radius-450) !important; border-start-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bbsr-500 | border-start-start-radius: var(--dt-size-radius-500) !important; border-start-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bbsr-550 | border-start-start-radius: var(--dt-size-radius-550) !important; border-start-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bbsr-600 | border-start-start-radius: var(--dt-size-radius-600) !important; border-start-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bbsr-pill | border-start-start-radius: var(--dt-size-radius-pill) !important; border-start-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bbsr-circle | border-start-start-radius: var(--dt-size-radius-circle) !important; border-start-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
.d-btr0 Deprecated | border-start-start-radius: var(--dt-size-radius-0) !important; border-start-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
.d-btr1 Deprecated | border-start-start-radius: var(--dt-size-radius-100) !important; border-start-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
.d-btr2 Deprecated | border-start-start-radius: var(--dt-size-radius-200) !important; border-start-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
.d-btr4 Deprecated | border-start-start-radius: var(--dt-size-radius-300) !important; border-start-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
.d-btr6 Deprecated | border-start-start-radius: var(--dt-size-radius-350) !important; border-start-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
.d-btr8 Deprecated | border-start-start-radius: var(--dt-size-radius-400) !important; border-start-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
.d-btr12 Deprecated | border-start-start-radius: var(--dt-size-radius-450) !important; border-start-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
.d-btr16 Deprecated | border-start-start-radius: var(--dt-size-radius-500) !important; border-start-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
.d-btr24 Deprecated | border-start-start-radius: var(--dt-size-radius-550) !important; border-start-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
.d-btr32 Deprecated | border-start-start-radius: var(--dt-size-radius-600) !important; border-start-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
.d-btr-pill Deprecated | border-start-start-radius: var(--dt-size-radius-pill) !important; border-start-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
.d-btr-circle Deprecated | border-start-start-radius: var(--dt-size-radius-circle) !important; border-start-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bier-0 | border-start-end-radius: var(--dt-size-radius-0) !important; border-end-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bier-100 | border-start-end-radius: var(--dt-size-radius-100) !important; border-end-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bier-200 | border-start-end-radius: var(--dt-size-radius-200) !important; border-end-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bier-300 | border-start-end-radius: var(--dt-size-radius-300) !important; border-end-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bier-350 | border-start-end-radius: var(--dt-size-radius-350) !important; border-end-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bier-400 | border-start-end-radius: var(--dt-size-radius-400) !important; border-end-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bier-450 | border-start-end-radius: var(--dt-size-radius-450) !important; border-end-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bier-500 | border-start-end-radius: var(--dt-size-radius-500) !important; border-end-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bier-550 | border-start-end-radius: var(--dt-size-radius-550) !important; border-end-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bier-600 | border-start-end-radius: var(--dt-size-radius-600) !important; border-end-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bier-pill | border-start-end-radius: var(--dt-size-radius-pill) !important; border-end-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bier-circle | border-start-end-radius: var(--dt-size-radius-circle) !important; border-end-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
.d-brr0 Deprecated | border-start-end-radius: var(--dt-size-radius-0) !important; border-end-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
.d-brr1 Deprecated | border-start-end-radius: var(--dt-size-radius-100) !important; border-end-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
.d-brr2 Deprecated | border-start-end-radius: var(--dt-size-radius-200) !important; border-end-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
.d-brr4 Deprecated | border-start-end-radius: var(--dt-size-radius-300) !important; border-end-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
.d-brr6 Deprecated | border-start-end-radius: var(--dt-size-radius-350) !important; border-end-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
.d-brr8 Deprecated | border-start-end-radius: var(--dt-size-radius-400) !important; border-end-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
.d-brr12 Deprecated | border-start-end-radius: var(--dt-size-radius-450) !important; border-end-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
.d-brr16 Deprecated | border-start-end-radius: var(--dt-size-radius-500) !important; border-end-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
.d-brr24 Deprecated | border-start-end-radius: var(--dt-size-radius-550) !important; border-end-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
.d-brr32 Deprecated | border-start-end-radius: var(--dt-size-radius-600) !important; border-end-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
.d-brr-pill Deprecated | border-start-end-radius: var(--dt-size-radius-pill) !important; border-end-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
.d-brr-circle Deprecated | border-start-end-radius: var(--dt-size-radius-circle) !important; border-end-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bber-0 | border-end-start-radius: var(--dt-size-radius-0) !important; border-end-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bber-100 | border-end-start-radius: var(--dt-size-radius-100) !important; border-end-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bber-200 | border-end-start-radius: var(--dt-size-radius-200) !important; border-end-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bber-300 | border-end-start-radius: var(--dt-size-radius-300) !important; border-end-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bber-350 | border-end-start-radius: var(--dt-size-radius-350) !important; border-end-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bber-400 | border-end-start-radius: var(--dt-size-radius-400) !important; border-end-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bber-450 | border-end-start-radius: var(--dt-size-radius-450) !important; border-end-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bber-500 | border-end-start-radius: var(--dt-size-radius-500) !important; border-end-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bber-550 | border-end-start-radius: var(--dt-size-radius-550) !important; border-end-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bber-600 | border-end-start-radius: var(--dt-size-radius-600) !important; border-end-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bber-pill | border-end-start-radius: var(--dt-size-radius-pill) !important; border-end-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bber-circle | border-end-start-radius: var(--dt-size-radius-circle) !important; border-end-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
.d-bbr0 Deprecated | border-end-start-radius: var(--dt-size-radius-0) !important; border-end-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
.d-bbr1 Deprecated | border-end-start-radius: var(--dt-size-radius-100) !important; border-end-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
.d-bbr2 Deprecated | border-end-start-radius: var(--dt-size-radius-200) !important; border-end-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
.d-bbr4 Deprecated | border-end-start-radius: var(--dt-size-radius-300) !important; border-end-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
.d-bbr6 Deprecated | border-end-start-radius: var(--dt-size-radius-350) !important; border-end-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
.d-bbr8 Deprecated | border-end-start-radius: var(--dt-size-radius-400) !important; border-end-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
.d-bbr12 Deprecated | border-end-start-radius: var(--dt-size-radius-450) !important; border-end-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
.d-bbr16 Deprecated | border-end-start-radius: var(--dt-size-radius-500) !important; border-end-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
.d-bbr24 Deprecated | border-end-start-radius: var(--dt-size-radius-550) !important; border-end-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
.d-bbr32 Deprecated | border-end-start-radius: var(--dt-size-radius-600) !important; border-end-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
.d-bbr-pill Deprecated | border-end-start-radius: var(--dt-size-radius-pill) !important; border-end-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
.d-bbr-circle Deprecated | border-end-start-radius: var(--dt-size-radius-circle) !important; border-end-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bisr-0 | border-start-start-radius: var(--dt-size-radius-0) !important; border-end-start-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bisr-100 | border-start-start-radius: var(--dt-size-radius-100) !important; border-end-start-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bisr-200 | border-start-start-radius: var(--dt-size-radius-200) !important; border-end-start-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bisr-300 | border-start-start-radius: var(--dt-size-radius-300) !important; border-end-start-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bisr-350 | border-start-start-radius: var(--dt-size-radius-350) !important; border-end-start-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bisr-400 | border-start-start-radius: var(--dt-size-radius-400) !important; border-end-start-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bisr-450 | border-start-start-radius: var(--dt-size-radius-450) !important; border-end-start-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bisr-500 | border-start-start-radius: var(--dt-size-radius-500) !important; border-end-start-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bisr-550 | border-start-start-radius: var(--dt-size-radius-550) !important; border-end-start-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bisr-600 | border-start-start-radius: var(--dt-size-radius-600) !important; border-end-start-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bisr-pill | border-start-start-radius: var(--dt-size-radius-pill) !important; border-end-start-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bisr-circle | border-start-start-radius: var(--dt-size-radius-circle) !important; border-end-start-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
.d-blr0 Deprecated | border-start-start-radius: var(--dt-size-radius-0) !important; border-end-start-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
.d-blr1 Deprecated | border-start-start-radius: var(--dt-size-radius-100) !important; border-end-start-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
.d-blr2 Deprecated | border-start-start-radius: var(--dt-size-radius-200) !important; border-end-start-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
.d-blr4 Deprecated | border-start-start-radius: var(--dt-size-radius-300) !important; border-end-start-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
.d-blr6 Deprecated | border-start-start-radius: var(--dt-size-radius-350) !important; border-end-start-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
.d-blr8 Deprecated | border-start-start-radius: var(--dt-size-radius-400) !important; border-end-start-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
.d-blr12 Deprecated | border-start-start-radius: var(--dt-size-radius-450) !important; border-end-start-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
.d-blr16 Deprecated | border-start-start-radius: var(--dt-size-radius-500) !important; border-end-start-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
.d-blr24 Deprecated | border-start-start-radius: var(--dt-size-radius-550) !important; border-end-start-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
.d-blr32 Deprecated | border-start-start-radius: var(--dt-size-radius-600) !important; border-end-start-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
.d-blr-pill Deprecated | border-start-start-radius: var(--dt-size-radius-pill) !important; border-end-start-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
.d-blr-circle Deprecated | border-start-start-radius: var(--dt-size-radius-circle) !important; border-end-start-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bssr-0 | border-start-start-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bssr-100 | border-start-start-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bssr-200 | border-start-start-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bssr-300 | border-start-start-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bssr-350 | border-start-start-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bssr-400 | border-start-start-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bssr-450 | border-start-start-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bssr-500 | border-start-start-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bssr-550 | border-start-start-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bssr-600 | border-start-start-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bssr-pill | border-start-start-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bssr-circle | border-start-start-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bser-0 | border-start-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-bser-100 | border-start-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-bser-200 | border-start-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-bser-300 | border-start-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-bser-350 | border-start-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-bser-400 | border-start-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-bser-450 | border-start-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-bser-500 | border-start-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-bser-550 | border-start-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-bser-600 | border-start-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-bser-pill | border-start-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-bser-circle | border-start-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-beer-0 | border-end-end-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-beer-100 | border-end-end-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-beer-200 | border-end-end-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-beer-300 | border-end-end-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-beer-350 | border-end-end-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-beer-400 | border-end-end-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-beer-450 | border-end-end-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-beer-500 | border-end-end-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-beer-550 | border-end-end-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-beer-600 | border-end-end-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-beer-pill | border-end-end-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-beer-circle | border-end-end-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-besr-0 | border-end-start-radius: var(--dt-size-radius-0) !important; | 0rem | 0px |
| .d-besr-100 | border-end-start-radius: var(--dt-size-radius-100) !important; | 0.1rem | 1px |
| .d-besr-200 | border-end-start-radius: var(--dt-size-radius-200) !important; | 0.2rem | 2px |
| .d-besr-300 | border-end-start-radius: var(--dt-size-radius-300) !important; | 0.4rem | 4px |
| .d-besr-350 | border-end-start-radius: var(--dt-size-radius-350) !important; | 0.6rem | 6px |
| .d-besr-400 | border-end-start-radius: var(--dt-size-radius-400) !important; | 0.8rem | 8px |
| .d-besr-450 | border-end-start-radius: var(--dt-size-radius-450) !important; | 1.2rem | 12px |
| .d-besr-500 | border-end-start-radius: var(--dt-size-radius-500) !important; | 1.6rem | 16px |
| .d-besr-550 | border-end-start-radius: var(--dt-size-radius-550) !important; | 2.4rem | 24px |
| .d-besr-600 | border-end-start-radius: var(--dt-size-radius-600) !important; | 3.2rem | 32px |
| .d-besr-pill | border-end-start-radius: var(--dt-size-radius-pill) !important; | 10.2rem | 102px |
| .d-besr-circle | border-end-start-radius: var(--dt-size-radius-circle) !important; | 50% | 50% |
| .d-bar-unset | border-radius: unset !important; | N/A | N/A |