Radius

Utilities for controlling the CSS border-radius property.

All corners

Class	border-radius
radius-0	0
radius-2	2px
radius-4	4px
radius-6	6px
radius-8	8px
radius-12	12px
radius-16	16px
radius-24	24px
radius-32	32px
radius-pill	9999px (pill shape)
radius-circle	50% (circle)

Individual corners

Class	Property
radius-tl-{n}	border-top-left-radius
radius-tr-{n}	border-top-right-radius
radius-bl-{n}	border-bottom-left-radius
radius-br-{n}	border-bottom-right-radius

Valid {n} values: 0, 2, 4, 6, 8, 12, 16, 24, 32.

Examples

<!-- Rounded card -->
<div class="radius-8 elevation-2 pa-4">Card</div>

<!-- Pill button -->
<button class="radius-pill pa-3 px-6 bg-blue text-white">Button</button>

<!-- Avatar circle -->
<img class="radius-circle" style="width: 48px; height: 48px" src="avatar.jpg" />

<!-- Rounded top only -->
<div class="radius-tl-8 radius-tr-8">
  Card header
</div>

<!-- Asymmetric corners -->
<div class="radius-tl-16 radius-br-16">
  Asymmetric design
</div>