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>