CAST Figuration®

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 multiple sizes of variants. Responsive classes are built in the form .radius{-side}-{size}.

Placeholder iamge with no rounded corners Placeholder iamge very slightly rounded corners Placeholder iamge slightly rounded corners Placeholder image with rounded corners Placeholder image with large rounded corners Placeholder image with extra large rounded corners Placeholder image with extra extra large rounded corners 
<img src="..." class="radius-0" alt="...">
<img src="..." class="radius-xsmall" alt="...">
<img src="..." class="radius-small" alt="...">
<img src="..." class="radius" alt="...">
<img src="..." class="radius-large" alt="...">
<img src="..." class="radius-xlarge" alt="...">
<img src="..." class="radius-2xlarge" alt="...">

Removing

Use the special case size of 0 (zero) to remove an elements radius, or a subset of radii.

Placeholder iamge with rounded corners on only one vertical side 
<img src="..." class="radius-large radius-s-0" alt="...">

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

Adjust various border properties with an array of 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>

Width

Adjust the width of an element's borders.

1px 2px 3px 4px 5px 
<span class="border border-1 p-0_5">1px</span>
<span class="border border-2 p-0_5">2px</span>
<span class="border border-3 p-0_5">3px</span>
<span class="border border-4 p-0_5">4px</span>
<span class="border border-5 p-0_5">5px</span>

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-width boolean true Enable the generation of the border width 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 
("xsmall":   .1875rem,
    "small":    .25rem,
    "large":   .5rem,
    "xlarge":   .75rem,
    "2xlarge":   1rem)
 Border radius size variants.
$border-widths map 
("1": 1px,
"2": 2px,
"3": 3px,
"4": 4px,
"5": 5px)
 Border width 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 string $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 string $border-radius 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 string $border-radius 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 string $border-radius 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 string $border-radius 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 string $border-radius 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 string $border-radius 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 string $border-radius 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 string $border-radius 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.
Top of Page