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