Chi Documentation

Border

Use shorthand border utility classes to control border, border width and border color on elements.

Notation

Border utility classes can be defined using the format -b{sides}{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.

{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

Examples

Border Sides

Apply borders to specific sides of an element by adding t, b, l, r, x or y to the class name.

-bt1
-br1
-bb1
-bl1
-bx1
-by1
<div class="-bt1"></div>
<div class="-br1"></div>
<div class="-bb1"></div>
<div class="-bl1"></div>
<div class="-bx1"></div>
<div class="-by1"></div>

Border Sizes

Control an elements border size by adjusting the size from 0 - 4.

-b0
-b1
-b2
-b3
-b4
<div class="-b0"></div>
<div class="-b1"></div>
<div class="-b2"></div>
<div class="-b3"></div>
<div class="-b4"></div>

Border Colors

Use contextual color classes to change a borders color.

Base
-bBrand
-bSuccess
-bDanger
-bInfo
-bWarning
-bDark
-bLight
<div class="-b1"></div>
<div class="-b1 -bBrand"></div>
<div class="-b1 -bSuccess"></div>
<div class="-b1 -bDanger"></div>
<div class="-b1 -bInfo"></div>
<div class="-b1 -bWarning"></div>
<div class="-b1 -bDark"></div>
<div class="-b1 -bLight"></div>