Shape utilities

Shape utilities are used for changing element shapes.

Border Radius: Sizing#

<!-- Rounded Edges (none, xs, sm, md, lg, xl) -->
<div class="rounded-0"></div>
<div class="rounded-xs"></div>
<div class="rounded-sm"></div>
<div class="rounded-md"></div>
<div class="rounded-lg"></div>
<div class="rounded-xl"></div>

Border Radius: Directional#

<!-- Rounded Edges: Directional (top, right, bottom, left) -->
<div class="rounded-top-sm"></div>
<div class="rounded-right-md"></div>
<div class="rounded-bottom-lg"></div>
<div class="rounded-left-xl"></div>