Border
Sets the color of elements borders
Borders Colors
Usage
/* Format */
.u-border__color--{name} {}
/* Examples & modifiers */
.u-border__color--primary {}
.u-border__color--secondary {}
.u-border__color--success {}
.u-border__color--danger {}
.u-border__color--info {}
.u-border__color--warning {}| Modifier | Values | Description |
|---|---|---|
|
name
|
primary, secondary, success, danger, info, warning | Sets the color of elements borders |
Examples
Borders
Usage
/* Format */
.u-border__{side}--{width} {}
/* Examples & modifiers */
.u-border__top--0 {}
.u-border__top--1 {}
.u-border__top--2 {}
.u-border__left--0 {}
.u-border__left--1 {}
.u-border__left--2 {}
.u-border__right--0 {}
.u-border__right--1 {}
.u-border__right--2 {}
.u-border__bottom--0 {}
.u-border__bottom--1 {}
.u-border__bottom--2 {}| Modifier | Values | Description |
|---|---|---|
|
side
|
top, left, right, bottom | Specify specific side |
|
width
|
0, 1, 2 | Sets the width of elements borders |
Supports responsive suffix (e.g. u-border__{side}--{width}@{sm, md, lg}).
Examples
Borders Sides
Usage
/* Format */
.u-border__{side}--{width} {}
/* Examples & modifiers */
.u-border__top--0 {}
.u-border__top--1 {}
.u-border__top--2 {}
.u-border__left--0 {}
.u-border__left--1 {}
.u-border__left--2 {}
.u-border__right--0 {}
.u-border__right--1 {}
.u-border__right--2 {}
.u-border__bottom--0 {}
.u-border__bottom--1 {}
.u-border__bottom--2 {}| Modifier | Values | Description |
|---|---|---|
|
side
|
top, left, right, bottom | Specify specific side |
|
width
|
0, 1, 2 | Sets the width of elements borders |
Supports responsive suffix (e.g. u-border__{side}--{width}@{sm, md, lg}).
Examples
Borders More
Usage
/* Format */
.u-border__style--{name} {}
/* Examples & modifiers */
.u-border__style--dashed {}
.u-border__style--dotted {}
.u-border__style--double {}
.u-border__style--groove {}
.u-border__style--ridge {}
.u-border__style--inset {}
.u-border__style--outset {}| Modifier | Values | Description |
|---|---|---|
|
name
|
dashed, dotted, double, groove, ridge, inset, outset | Sets the style of elements borders |
Preview
Preview