Border Radius

Usage

<div class="bg-indigo w-16 h-16 br-2"></div>

Top Radius

Apply a 0.5 rem radius to the top border of an element.

<div class="bg-indigo w-16 h-16 btr-2"></div>

Right Radius

Apply a 0.5 rem radius to the right border of an element.

<div class="bg-indigo w-16 h-16 brr-2"></div>

Bottom Radius

Apply a 0.5 rem radius to the bottom border of an element.

Apply a 0.5 rem radius to the bottom border of an element.

<div class="bg-indigo w-16 h-16 bbr-2"></div>

Left Radius

Apply a 0.5 rem radius to the left border of an element.

<div class="bg-indigo w-16 h-16 blr-2"></div>

Top Right Radius

Apply a 0.5 rem radius to the top right corner of an element.

<div class="bg-indigo w-16 h-16 btrr-2"></div>

Bottom Right Radius

Apply a 0.5 rem radius to the bottom right corner of an element.

<div class="bg-indigo w-16 h-16 bbrr-2"></div>

Bottom Left Radius

Apply a 0.5 rem radius to the bottom left corner of an element.

<div class="bg-indigo w-16 h-16 bblr-2"></div>

Top Left Radius

Apply a 0.5 rem radius to the top left corner of an element.

<div class="bg-indigo w-16 h-16 btlr-2"></div>

Use Percentages

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <div class="ai-c bg-indigo w-16 h-16 d-f jc-c br-full c-white">100%</div>
  <div class="ai-c bg-indigo w-16 h-16 d-f jc-c br-half c-white">50%</div>
</div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

Hover State

Apply styles conditionally on hover using the h: prefix.

Negative Values

Use negative variants to apply negative border radius values.