Border Radius

Usage

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

Top Radius

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

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

Right Radius

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

<div class="w-16 h-16 bg-indigo 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="w-16 h-16 bg-indigo bbr-2"></div>

Left Radius

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

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

Top Right Radius

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

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

Bottom Right Radius

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

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

Bottom Left Radius

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

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

Top Left Radius

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

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

Use Percentages

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