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{-side}
.
Where sides is one of:
- blank - for
all
4 corners of the element t
- for both corners on thetop
sideb
- for both corners on thebottom
sidee
- for both corners on theend
sides
- for both corners on thestart
sidete
- for thetop end
cornerts
- for thetop start
cornerbe
- for thebottom end
cornerbs
- for thebottom 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 theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
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="...">
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}
.
<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.
<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
.
<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 thetop
side.border-b
- for thebottom
side.border-e
- for theend
side.border-s
- for thestart
side.border-x
- for bothstart
andend
sides.border-y
- for bothtop
andbottom
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 theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
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>
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
- forall
4 sides of the element.border-t-0
- for thetop
side.border-b-0
- for thebottom
side.border-e-0
- for theend
side.border-s-0
- for thestart
side.border-x-0
- for bothstart
andend
sides.border-y-0
- for bothtop
andbottom
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 theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
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:
<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.
<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 |
|
Border radius size variants. |
$border-widths |
map |
|
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.
|