Border Radius

Usage

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

Top Radius

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

<div class="bg-indigo d-16 br-t-2"></div>

Right Radius

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

<div class="bg-indigo d-16 br-r-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 d-16 br-b-2"></div>

Left Radius

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

<div class="bg-indigo d-16 br-l-2"></div>

Top Right Radius

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

<div class="bg-indigo d-16 br-tr-2"></div>

Bottom Right Radius

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

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

Bottom Left Radius

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

<div class="bg-indigo d-16 br-bl-2"></div>

Top Left Radius

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

<div class="bg-indigo d-16 br-tl-2"></div>

Use Percentages

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

Responsive Design

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.