Border
| Class Name | Description |
|---|---|
u-borderAll |
Adds a 1px solid border around an element. |
Borders
Border Style
Alter the style of a border.
| Class Name | Demo |
|---|---|
u-borderDotted |
|
u-borderDashed |
|
u-borderSolid |
Border Color
Alter the color of a border.
Brand Colors
| Class Name | Demo |
|---|---|
u-borderPrimary |
|
u-borderPrimaryLight |
|
u-borderPrimaryDark |
|
u-borderSecondary |
|
u-borderSecondaryLight |
|
u-borderSecondaryDark |
Accent Colors
| Class Name | Demo |
|---|---|
u-borderBlue1 |
Sample text |
u-borderBlue2 |
Sample text |
u-borderBlue3 |
Sample text |
u-borderBlue4 |
Sample text |
u-borderBlue5 |
Sample text |
u-borderBlue6 |
Sample text |
u-borderBlue7 |
Sample text |
u-borderBlue8 |
Sample text |
u-borderBlue9 |
Sample text |
u-borderBlue10 |
Sample text |
u-borderBlue11 |
Sample text |
| Class Name | Demo |
|---|---|
u-borderForest1 |
Sample text |
u-borderForest2 |
Sample text |
u-borderForest3 |
Sample text |
u-borderForest4 |
Sample text |
u-borderForest5 |
Sample text |
u-borderForest6 |
Sample text |
u-borderForest7 |
Sample text |
u-borderForest8 |
Sample text |
u-borderForest9 |
Sample text |
| Class Name | Demo |
|---|---|
u-borderSunset1 |
Sample text |
u-borderSunset2 |
Sample text |
u-borderSunset3 |
Sample text |
u-borderSunset4 |
Sample text |
u-borderSunset5 |
Sample text |
u-borderSunset6 |
Sample text |
u-borderSunset7 |
Sample text |
u-borderSunset8 |
Sample text |
u-borderSunset9 |
Sample text |
| Class Name | Demo |
|---|---|
u-borderMulberry1 |
Sample text |
u-borderMulberry2 |
Sample text |
u-borderMulberry3 |
Sample text |
u-borderMulberry4 |
Sample text |
u-borderMulberry5 |
Sample text |
u-borderMulberry6 |
Sample text |
u-borderMulberry7 |
Sample text |
u-borderMulberry8 |
Sample text |
u-borderMulberry9 |
Sample text |
Grayscale
| Class Name | Demo |
|---|---|
u-borderWhite |
|
u-borderGrayLightest |
|
u-borderGrayLighter |
|
u-borderGrayLight |
|
u-borderGray |
|
u-borderGrayDark |
|
u-borderGrayDarker |
|
u-borderGrayDarkest |
|
u-borderBlackish |
|
u-borderBlack |
| Class Name | Demo |
|---|---|
u-borderCaviar1 |
Sample text
|
u-borderCaviar2 |
Sample text
|
u-borderCaviar3 |
Sample text
|
u-borderCaviar4 |
Sample text
|
u-borderCaviar5 |
Sample text
|
u-borderCaviar6 |
Sample text
|
u-borderCaviar7 |
Sample text
|
u-borderCaviar8 |
Sample text
|
u-borderCaviar9 |
Sample text
|
u-borderCaviar10 |
Sample text
|
u-borderCaviar11 |
Sample text
|
Validations
| Class Name | Demo |
|---|---|
u-borderSuccess |
|
u-borderError |
Border Position
Add a border to a particular side.
| Class Name | Description |
|---|---|
u-borderTop |
|
u-borderBottom |
|
u-borderLeft |
|
u-borderRight |
Border Width
Increase or decrease the width of a border.
| Class Name | Demo |
|---|---|
u-border0 |
|
u-border1 |
|
u-border2 |
|
u-border3 |
|
u-border4 |
|
u-border5 |
Border Radius
Add a border radius.
| Class Name | Demo |
|---|---|
u-radius0 |
0 |
u-radius1 |
4px |
u-radius2 |
8px |
u-radius3 |
12px |
u-radius4 |
16px |
u-radius5 |
20px |
u-radius100 |
100% |