v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

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{-side}.

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
Example radiused image Example top radiused image Example bottom radiused image Example 'start' radiused image Example 'end' radiused image
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="...">

Sizes #

A few sizes are available, the default border-radius size, along with small and large variants. Responsive classes are built in the form .radius{-side}-{size}.

Placeholder iamge slightly rounded corners Placeholder image with rounded corners Placeholder image with more rounded corners
<img src="..." class="radius-small" alt="...">
<img src="..." class="radius" alt="...">
<img src="..." class="radius-large" 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.

Completely round Horizontal elipse Vertical elipse
<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="...">

Pills #

Create a 'pill' shape with .radius-pill.

Rounded pill image Rounded pill image
<img src="..." class="radius-pill" width="100" height="50" alt="...">
<img src="..." class="radius-pill" width="75" height="32" alt="...">

Borders #

Add or remove borders on all or just one side with border utilities

Adding Borders #

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>

Removing Borders #

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

Available border removal utilities are:

  • .border-0 - for all 4 sides of the element
  • .border-t-0 - for the top side
  • .border-b-0 - for the bottom side
  • .border-e-0 - for the end side
  • .border-s-0 - for the start side
  • .border-x-0 - for both start and end sides
  • .border-y-0 - 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>
<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>

Responsive Borders #

Add or remove borders with responsive border utility classes in the form of .border{-breakpoint}{-side}{-0}.

For example to have a border on the sides of an element up to and including the md breakpoint, and then at the lg breakpoint switch to only having top and bottom borders, you would do the following:

Sample container
<div class="border-x border-lg-x-0 border-lg-y bg-light p-0_5" style="max-width: 18rem;">
Sample container
</div>

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-border boolean true Enable the generation of the border utility classes. Smaller segements of the border utilities can be disabled with the following $enable-* variables.
$enable-utility-border-addition boolean true Enable the generation of the additive border utility classes.
$enable-utility-border-removal boolean true Enable the generation of the subtractive border utility classes.
$enable-utility-border-colors boolean true Enable the generation of the theme border color utility classes.
$enable-utility-border-palette boolean true Enable the generation of the palette border color utility classes.
$enable-utility-border-special boolean true Enable the generation of the transparent border color utility class.
$enable-utility-border-radius-circle boolean true Enable the generation of the circle border radius utility classes.
$enable-utility-border-radius-pill boolean true Enable the generation of the pill border radius utility classes.
$enable-utility-border-radius-addition boolean true Enable the generation of the additive border radius utility classes.
$enable-utility-border-radius-sizing boolean true Enable the generation of the additive border radius size variant utility classes.
$enable-utility-border-radius-removal boolean true Enable the generation of the subtractive border radius utility classes.
$radius-border-radius number $border-radius Border radius size.
$radii map
("small": .1875rem,
"large": .3125rem)
Border radius size variants.
$utility-border-breakpoints list map-keys($grid-breakpoints) Breakpoint list to generate for additive and subtractive border radius utilities.
$utility-border-colors map $base-colors Themed border colors.
$palette-colors-borders map $palette-colors Palette-based border colors.
$palette-levels-borders list $palette-levels List of palette levels to use with palette border colors.

Mixins #

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

border-radius() #

Apply a border radius to an element.

@include border-radius($radius);
Argument Type Default Description
$radius number $border-radius Border radius dimension.

border-top-radius() #

Apply a border radius the corners on the top side of an element.

@include border-top-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-end-radius() #

Apply a border radius the corners on the end side of an element.

@include border-end-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-bottom-radius() #

Apply a border radius the corners on the bottom side of an element.

@include border-bottom-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-start-radius() #

Apply a border radius the corners on the start side of an element.

@include border-start-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-top-start-radius() #

Apply a border radius on the top start corner of an element.

@include border-top-start-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-top-end-radius() #

Apply a border radius on the top end corner of an element.

@include border-top-end-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-bottom-start-radius() #

Apply a border radius on the bottom start corner of an element.

@include border-bottom-start-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

border-bottom-end-radius() #

Apply a border radius on the bottom end corner of an element.

@include border-bottom-end-radius($radius);
Argument Type Default Description
$radius number none Border radius dimension.

radius-sides() #

Generate component size border radius utility classes for use with an element's sides.

@include radius-sides($radius, $size);
Argument Type Default Description
$radius number $radius-border-radius Border radius dimension.
$size string null Name for the component size. A null value will not include a component size in the class names.

radius-corners() #

Generate component size border radius utility classes for use with an element's individual corners.

@include radius-corners($radius, $size);
Argument Type Default Description
$radius number $radius-border-radius Border radius dimension.
$size string null Name for the component size. A null value will not include a component size in the class names.