Skip to main content
Figuration v3 Preview Available!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Borders

Easily manipulate borders on your images or other elements.

Contents

Border Radius

Add a class to your element to round the corners. You can target various sides of an element using the format .radius-{sides}.

Where sides is one of:

  • blank - for all 4 corners of the element
  • t - for both corners on the top side
  • b - for both corners on the bottom side
  • r - for both corners on the right side
  • l - for both corners on the left side
  • tr - for the top right corner
  • tl - for the top left corner
  • br - for the bottom right corner
  • bl - for the bottom left corner
A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners on the top edge A generic square placeholder image with rounded corners on the bottom edge A generic square placeholder image with rounded corners on the right edge A generic square placeholder image with rounded corners on the left edge
A generic square placeholder image a rounded corner on the top right A generic square placeholder image a rounded corner on the top left edge A generic square placeholder image a rounded corner on the bottom right A generic square placeholder image a rounded corner on the bottom left
<!-- Sides -->
<img src="..." class="radius" alt="...">
<img src="..." class="radius-t" alt="...">
<img src="..." class="radius-b" alt="...">
<img src="..." class="radius-r" alt="...">
<img src="..." class="radius-l" alt="...">

<!-- Corners -->
<img src="..." class="round-tr" alt="...">
<img src="..." class="round-tl" alt="...">
<img src="..." class="round-br" alt="...">
<img src="..." class="round-bl" alt="...">

Using Component Sizes

A few sizes are available using the component sizing options. Classes are built in the form .radius-{sides}-{size}.

By default the xs and sm sizes are the same radius. Also the lg and xl sizes are the same radius.

A generic square placeholder image with lightly rounded corners A generic square placeholder image with rounded corners A generic square placeholder image with more rounded corners
<img src="..." class="radius-sm" alt="...">
<img src="..." class="radius" alt="...">
<img src="..." class="radius-lg" alt="...">

Removing

There is also the special case size of 0 (zero) to remove a radius.

<button type="button" class="btn radius-l-0">Button</button>

Circles

When elements are of a square (1:1) aspect ratio, you can create a circle using .radius-circle. If the element has an unequal aspect ratio, you will get more on an elipse shape.

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic horizontal rectangle placeholder image where only the portion within the elipse circumscribed about said square is visible A generic vertical rectangle placeholder image where only the portion within the elipse circumscribed about said square is visible
<img src="..." class="radius-circle" alt="...">

Border Removal

Add a class to remove a border on a given side of an element, using the format .border-0-{sides}.

Where sides is one of:

  • blank - for all 4 sides of the element
  • t - for the top side
  • b - for the bottom side
  • r - for the right side
  • l - for the left side

See the following example of removing various borders from some buttons.

<button type="button" class="btn radius-0 border-0">all</button>
<button type="button" class="btn radius-0 border-t-0">top</button>
<button type="button" class="btn radius-0 border-r-0">right</button>
<button type="button" class="btn radius-0 border-b-0">bottom</button>
<button type="button" class="btn radius-0 border-l-0">left</button>