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{-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
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}
.
Removing
There is also the special case size of 0
(zero) to remove a radius.
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.
Pills
Create a ‘pill’ shape with .radius-pill
.
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 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
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.
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:
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 |
|
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
|