Border Radius

Utilities for controlling an element's border radius.

Classes

Class Output
.d-bar-unset border-radius: unset !important;
.d-bar0
border-radius: var(--br0) !important;
.d-bar2
border-radius: var(--br2) !important;
.d-bar4
border-radius: var(--br4) !important;
.d-bar8
border-radius: var(--br8) !important;
.d-bar12
border-radius: var(--br12) !important;
.d-bar16
border-radius: var(--br16) !important;
.d-bar24
border-radius: var(--br24) !important;
.d-bar32
border-radius: var(--br32) !important;
.d-bar-circle
border-radius: var(--br-circle) !important;
.d-bar-pill
border-radius: var(--br-pill) !important;
.d-btr0
border-top-left-radius: var(--br0) !important;
border-top-right-radius: var(--br0) !important;
.d-btr2
border-top-left-radius: var(--br2) !important;
border-top-right-radius: var(--br2) !important;
.d-btr4
border-top-left-radius: var(--br4) !important;
border-top-right-radius: var(--br4) !important;
.d-btr8
border-top-left-radius: var(--br8) !important;
border-top-right-radius: var(--br8) !important;
.d-btr12
border-top-left-radius: var(--br12) !important;
border-top-right-radius: var(--br12) !important;
.d-btr16
border-top-left-radius: var(--br16) !important;
border-top-right-radius: var(--br16) !important;
.d-btr24
border-top-left-radius: var(--br24) !important;
border-top-right-radius: var(--br24) !important;
.d-btr32
border-top-left-radius: var(--br32) !important;
border-top-right-radius: var(--br32) !important;
.d-btr-circle
border-top-left-radius: var(--br-circle) !important;
border-top-right-radius: var(--br-circle) !important;
.d-btr-pill
border-top-left-radius: var(--br-pill) !important;
border-top-right-radius: var(--br-pill) !important;
.d-brr0
border-top-right-radius: var(--br0) !important;
border-bottom-right-radius: var(--br0) !important;
.d-brr2
border-top-right-radius: var(--br2) !important;
border-bottom-right-radius: var(--br2) !important;
.d-brr4
border-top-right-radius: var(--br4) !important;
border-bottom-right-radius: var(--br4) !important;
.d-brr8
border-top-right-radius: var(--br8) !important;
border-bottom-right-radius: var(--br8) !important;
.d-brr12
border-top-right-radius: var(--br12) !important;
border-bottom-right-radius: var(--br12) !important;
.d-brr16
border-top-right-radius: var(--br16) !important;
border-bottom-right-radius: var(--br16) !important;
.d-brr24
border-top-right-radius: var(--br24) !important;
border-bottom-right-radius: var(--br24) !important;
.d-brr32
border-top-right-radius: var(--br32) !important;
border-bottom-right-radius: var(--br32) !important;
.d-brr-circle
border-top-right-radius: var(--br-circle) !important;
border-bottom-right-radius: var(--br-circle) !important;
.d-brr-pill
border-top-right-radius: var(--br-pill) !important;
border-bottom-right-radius: var(--br-pill) !important;
.d-bbr0
border-bottom-left-radius: var(--br0) !important;
border-bottom-right-radius: var(--br0) !important;
.d-bbr2
border-bottom-left-radius: var(--br2) !important;
border-bottom-right-radius: var(--br2) !important;
.d-bbr4
border-bottom-left-radius: var(--br4) !important;
border-bottom-right-radius: var(--br4) !important;
.d-bbr8
border-bottom-left-radius: var(--br8) !important;
border-bottom-right-radius: var(--br8) !important;
.d-bbr12
border-bottom-left-radius: var(--br12) !important;
border-bottom-right-radius: var(--br12) !important;
.d-bbr16
border-bottom-left-radius: var(--br16) !important;
border-bottom-right-radius: var(--br16) !important;
.d-bbr24
border-bottom-left-radius: var(--br24) !important;
border-bottom-right-radius: var(--br24) !important;
.d-bbr32
border-bottom-left-radius: var(--br32) !important;
border-bottom-right-radius: var(--br32) !important;
.d-bbr-circle
border-bottom-left-radius: var(--br-circle) !important;
border-bottom-right-radius: var(--br-circle) !important;
.d-bbr-pill
border-bottom-left-radius: var(--br-pill) !important;
border-bottom-right-radius: var(--br-pill) !important;
.d-blr0
border-bottom-left-radius: var(--br0) !important;
border-top-left-radius: var(--br0) !important;
.d-blr2
border-bottom-left-radius: var(--br2) !important;
border-top-left-radius: var(--br2) !important;
.d-blr4
border-bottom-left-radius: var(--br4) !important;
border-top-left-radius: var(--br4) !important;
.d-blr8
border-bottom-left-radius: var(--br8) !important;
border-top-left-radius: var(--br8) !important;
.d-blr12
border-bottom-left-radius: var(--br12) !important;
border-top-left-radius: var(--br12) !important;
.d-blr16
border-bottom-left-radius: var(--br16) !important;
border-top-left-radius: var(--br16) !important;
.d-blr24
border-bottom-left-radius: var(--br24) !important;
border-top-left-radius: var(--br24) !important;
.d-blr32
border-bottom-left-radius: var(--br32) !important;
border-top-left-radius: var(--br32) !important;
.d-blr-circle
border-bottom-left-radius: var(--br-circle) !important;
border-top-left-radius: var(--br-circle) !important;
.d-blr-pill
border-bottom-left-radius: var(--br-pill) !important;
border-top-left-radius: var(--br-pill) !important;

All Corners

Use d-bar{n} to change the border radius on all corners of your element.

Rounded Sides

Use d-b{t|r|b|l}r{n} to change the border radius on a side of your element.

Pills

Use d-b{a|t|r|b|l}r-pill to change the border radius of your element to a pill shape.

Circles

Use d-b{a|t|r|b|l}r-circle to change the border radius of your element to a circle shape.