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>