Border Radius

Utility classes for changing an element's border radius.

Variables

When writing Less, you can set an element's border-radius by using a @border-radius--{type} variable. The table below lists the available variables and its output.

Variable Output
@border-radius--none 0
@border-radius--sm 0.4rem
@border-radius--md 0.8rem
@border-radius--lg 1.2rem
@border-radius--xl 1.6rem
@border-radius--circle 50%

Classes

Set an element's universal or directional border-radius by using a .d-border-{direction}-radius--{size} class. The table below lists the available classes, border radius size, and the CSS output.

Class Output
.d-border-radius--none border-radius: 0;
.d-border-radius--sm border-radius: 0.4rem;
.d-border-radius--md border-radius: 0.8rem;
.d-border-radius--lg border-radius: 1.2rem;
.d-border-radius--xl border-radius: 1.6rem;
.d-border-radius--circle border-radius: 50%;
.d-border-top-radius--none border-top-left-radius: 0;
border-top-right-radius: 0;
.d-border-top-radius--sm border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
.d-border-top-radius--md border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
.d-border-top-radius--lg border-top-left-radius: 1.2rem;
border-top-right-radius: 1.2rem;
.d-border-top-radius--xl border-top-left-radius: 1.6rem;
border-top-right-radius: 1.6rem;
.d-border-top-radius--circle border-top-left-radius: 50%;
border-top-right-radius: 50%;
.d-border-right-radius--none border-top-right-radius: 0;
border-bottom-right-radius: 0;
.d-border-right-radius--sm border-top-right-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
.d-border-right-radius--md border-top-right-radius: 0.8rem;
border-bottom-right-radius: 0.8rem;
.d-border-right-radius--lg border-top-right-radius: 1.2rem;
border-bottom-right-radius: 1.2rem;
.d-border-right-radius--xl border-top-right-radius: 1.6rem;
border-bottom-right-radius: 1.6rem;
.d-border-right-radius--circle border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
.d-border-bottom-radius--none border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.d-border-bottom-radius--sm border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
.d-border-bottom-radius--md border-bottom-left-radius: 0.8rem;
border-bottom-right-radius: 0.8rem;
.d-border-bottom-radius--lg border-bottom-left-radius: 1.2rem;
border-bottom-right-radius: 1.2rem;
.d-border-bottom-radius--xl border-bottom-left-radius: 1.6rem;
border-bottom-right-radius: 1.6rem;
.d-border-bottom-radius--circle border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
.d-border-left-radius--none border-top-left-radius: 0;
border-bottom-left-radius: 0;
.d-border-left-radius--sm border-top-left-radius: 0.4rem;
border-bottom-left-radius: 0.4rem;
.d-border-left-radius--md border-top-left-radius: 0.8rem;
border-bottom-left-radius: 0.8rem;
.d-border-left-radius--lg border-top-left-radius: 1.2rem;
border-bottom-left-radius: 1.2rem;
.d-border-left-radius--xl border-top-left-radius: 1.6rem;
border-bottom-left-radius: 1.6rem;
.d-border-left-radius--circle border-top-left-radius: 50%;
border-bottom-left-radius: 50%;

Examples

All corners

Changes the border-radius for all corners.

none
sm
md
lg
xl
circle
<div class="d-border-radius--none"></div>
<div class="d-border-radius--sm"></div>
<div class="d-border-radius--md"></div>
<div class="d-border-radius--lg"></div>
<div class="d-border-radius--xl"></div>
<div class="d-border-radius--circle"></div>

Top

Changes the border-radius for top corners.

top--none
top--sm
top--md
top--lg
top--xl
top--circle
<div class="d-border-top-radius--none"></div>
<div class="d-border-top-radius--sm"></div>
<div class="d-border-top-radius--md"></div>
<div class="d-border-top-radius--lg"></div>
<div class="d-border-top-radius--xl"></div>
<div class="d-border-top-radius--circle"></div>

Right

Changes the border-radius for right corners.

right--none
right--sm
right--md
right--lg
right--xl
right--circle
<div class="d-border-right-radius--none"></div>
<div class="d-border-right-radius--sm"></div>
<div class="d-border-right-radius--md"></div>
<div class="d-border-right-radius--lg"></div>
<div class="d-border-right-radius--xl"></div>
<div class="d-border-right-radius--circle"></div>

Bottom

Changes the border-radius for bottom corners.

bottom--none
bottom--sm
bottom--md
bottom--lg
bottom--xl
bottom--circle
<div class="d-border-bottom-radius--none"></div>
<div class="d-border-bottom-radius--sm"></div>
<div class="d-border-bottom-radius--md"></div>
<div class="d-border-bottom-radius--lg"></div>
<div class="d-border-bottom-radius--xl"></div>
<div class="d-border-bottom-radius--circle"></div>

Left

Changes the border-radius for all corners.

left--none
left--sm
left--md
left--lg
left--xl
left--circle
<div class="d-border-left-radius--none"></div>
<div class="d-border-left-radius--sm"></div>
<div class="d-border-left-radius--md"></div>
<div class="d-border-left-radius--lg"></div>
<div class="d-border-left-radius--xl"></div>
<div class="d-border-left-radius--circle"></div>