Skip to main content
Figuration v4 is now 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.

Page 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
  • e - for both corners on the end side
  • s - for both corners on the start side
  • te - for the top end corner
  • ts - for the top start corner
  • be - for the bottom end corner
  • bs - for the bottom start corner

The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.

  • For left-to-right mode (ltr - default);
    • start refers to the left side
    • end refers to the right side
  • For right-to-left mode (rtl);
    • start refers to the right side
    • end refers to the left side
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 'start' edge A generic square placeholder image with rounded corners on the 'end' edge
A generic square placeholder image a rounded corner on the top 'end' A generic square placeholder image a rounded corner on the top 'start' A generic square placeholder image a rounded corner on the bottom 'end' A generic square placeholder image a rounded corner on the bottom 'start'
<!-- Sides -->
<img src="..." class="radius" alt="...">
<img src="..." class="radius-t" alt="...">
<img src="..." class="radius-b" alt="...">
<img src="..." class="radius-e" alt="...">
<img src="..." class="radius-s" alt="...">

<!-- Corners -->
<img src="..." class="round-te" alt="...">
<img src="..." class="round-ts" alt="...">
<img src="..." class="round-be" alt="...">
<img src="..." class="round-bs" 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-s-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" width="100" height="100" alt="...">
<img src="..." class="radius-circle" width="100" height="50" alt="...">
<img src="..." class="radius-circle" width="50" height="100" alt="...">

Border Addition

Quickly add the default component border to an element with the .border{-side} utility classes.

Available border addition utilities are:

  • .border - for all sides
  • .border-t - for the top side
  • .border-b - for the bottom side
  • .border-e - for the end side
  • .border-s - for the start side
  • .border-x - for both start and end sides
  • .border-y - for both top and bottom sides

The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.

  • For left-to-right mode (ltr - default);
    • start refers to the left side
    • end refers to the right side
  • For right-to-left mode (rtl);
    • start refers to the right side
    • end refers to the left side
This div container has a border on all sides, and some padding added.
This div container has a border on the left and right sides, and some padding added.
This div container has a border on the top and bottom sides, and some padding added.
'top' 'end' 'bottom' 'start'
<div class="border bg-gray-50 p-0_5 mb-1">
This div container has a border on all sides, and some padding added.
</div>

<div class="border-x bg-gray-50 p-0_5 mb-1">
This div container has a border on the left and right sides, and some padding added.
</div>

<div class="border-y bg-gray-50 p-0_5 mb-1">
This div container has a border on the top and bottom sides, and some padding added.
</div>

<span class="border-t bg-gray-50 p-0_5" style="width: 3rem;">'top'</span>
<span class="border-e bg-gray-50 p-0_5" style="width: 3rem;">'end'</span>
<span class="border-b bg-gray-50 p-0_5" style="width: 3rem;">'bottom'</span>
<span class="border-s bg-gray-50 p-0_5" style="width: 3rem;">'start'</span>

Border Removal

Remove the border on a given side of an element with the .border-0{-side} utility classes.

Available border removal utilities are:

  • .border-0 - for all 4 sides of the element
  • .border-0-t - for the top side
  • .border-0-b - for the bottom side
  • .border-0-e - for the end side
  • .border-0-s - for the start side
  • .border-0-x - for both start and end sides
  • .border-0-y - for both top and bottom sides

The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.

  • For left-to-right mode (ltr - default);
    • start refers to the left side
    • end refers to the right side
  • For right-to-left mode (rtl);
    • start refers to the right side
    • end refers to 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-e-0">'end'</button>
<button type="button" class="btn radius-0 border-b-0">bottom</button>
<button type="button" class="btn radius-0 border-s-0">'start'</button>
<br />
<button type="button" class="btn radius-0 border-x-0">left and right</button>
<button type="button" class="btn radius-0 border-y-0">top and bottom</button>