Borders

Border

Class Name Description
u-borderAll Adds a 1px solid border around an element.

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%