Border

Notation

Border utility classes can be defined using the format -b{sides}[-{breakpoint}]--{size}.

{sides}

• t - use to apply border-top
• b - use to apply border-bottom
• l - use to apply border-left
• r - use to apply border-right
• x - use to apply border-left and border-right
• y - use to apply border-top and border-bottom
• blank - leave blank to apply border to all 4 sides.

{breakpoint}

Optionally, include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile-first library, any applying to smaller breakpoints will also modify larger ones unless another class overrides this behaviour.

• blank - leave blank to apply border to all breakpoints.
• sm - use to apply border to sm and larger breakpoints.
• md - use to apply border to md and larger breakpoints.
• lg - use to apply border to lg and larger breakpoints.
• xl - use to apply border to xl breakpoints.

{size}

• 0 - use to eliminate existing border and set to 0
• 1 - use to set border to 1px
• 2 - use to set border to 2px
• 3 - use to set border to 3px
• 4 - use to set border to 4px