Borders

Easily manipulate borders on your images or other elements.

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

<!-- 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.

<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.

<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

<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>