Shape
Use shape utilities to quickly change the shape of an element.
Introduction
Shape utilities are classes for setting the value of the
border-radius
property. They are named using the format: .{shape}-{direction}.
Like some other utility classes,
we use the first letter of each direction for short.
All direction abbreviations are listed in the below table.
| Abbreviation | Direction |
|---|---|
| t | top |
| r | right |
| b | bottom |
| l | left |
Rounded
Rounded shape utilities set a small border-radius value(2px by default) to elements.
Let’s see the effects in the below gallery.
.rounded-t
.rounded-r
.rounded-b
.rounded-l
.rounded
<div class="rounded-t"></div>
<div class="rounded-r"></div>
<div class="rounded-b"></div>
<div class="rounded-l"></div>
<div class="rounded"></div>
Circle
Circle utilities add a very large border-radius to elements
to make them more rounded.
Let’s preview the effects in the below gallery.
.circle-t
.circle-r
.circle-b
.circle-l
.circle
<div class="circle-t"></div>
<div class="circle-r"></div>
<div class="circle-b"></div>
<div class="circle-l"></div>
<div class="circle"></div>
Sharp
Sharp utilities set the value of the border-radius property to 0,
it’s usually used to remove an element’s border radius.
.sharp-t
.sharp-r
.sharp-b
.sharp-l
.sharp
<div style="border-radius: 10px" class="sharp-t"></div>
<div style="border-radius: 10px" class="sharp-r"></div>
<div style="border-radius: 10px" class="sharp-b"></div>
<div style="border-radius: 10px" class="sharp-l"></div>
<div style="border-radius: 10px" class="sharp"></div>
Sass Variables
$border-radius-sharp: 0 !default
$border-radius-rounded: 2px !default
$border-radius-circle: 9999px !default