Borders

Stacks provides atomic classes for borders.

Class Output Definition Responsive?
.ba border: solid 1px #000 Apply a border to all sides
.bt border-top: solid 1px #000 Apply a border to the top side
.bb border-bottom: solid 1px #000 Apply a border to the bottom side
.bl border-left: solid 1px #000 Apply a border to the left side
.br border-right: solid 1px #000 Apply a border to the right side
.by border-top: solid 1px #000; border-bottom: solid 1px #000; Apply a border to the top and bottom sides
.bx border-left: solid 1px #000; border-right: solid 1px #000; Apply a border to the left and right sides
<div class="ba"></div>
<div class="bt"></div>
<div class="br"></div>
<div class="bb"></div>
<div class="bl"></div>
<div class="bx"></div>
<div class="by"></div>
All borders
Top border
Right border
Bottom border
Left border
X border
Y border
Class Output Definition Responsive?
.baw0 border-width: 0 Applies a border width of zero to all sides
.btw0 border-top-width: 0 Applies a border width of zero to the top side
.bbw0 border-bottom-width: 0 Applies a border width of zero to the bottom side
.blw0 border-left-width: 0 Applies a border width of zero to the left side
.brw0 border-right-width: 0 Applies a border width of zero to the right side
.byw0 border-top-width: 0; border-bottom-width: 0; Applies a border width of zero to the top and bottom sides
.bxw0 border-left-width: 0; border-right-width: 0; Applies a border width of zero to the left and right sides
.baw1 border-width: 1px Applies a border width of 1px to all sides
.btw1 border-top-width: 1px Applies a border width of 1px to the top side
.bbw1 border-bottom-width: 1px Applies a border width of 1px to the bottom side
.blw1 border-left-width: 1px Applies a border width of 1px to the left side
.brw1 border-right-width: 1px Applies a border width of 1px to the right side
.byw1 border-top-width: 1px; border-bottom-width: 1px; Applies a border width of 1px to the top and bottom sides
.bxw1 border-left-width: 1px; border-right-width: 1px; Applies a border width of 1px to the left and right sides
.baw2 border-width: 2px Applies a border width of 2px to all sides
.btw2 border-top-width: 2px Applies a border width of 2px to the top side
.bbw2 border-bottom-width: 2px Applies a border width of 2px to the bottom side
.blw2 border-left-width: 2px Applies a border width of 2px to the left side
.brw2 border-right-width: 2px Applies a border width of 2px to the right side
.byw2 border-top-width: 2px; border-bottom-width: 2px; Applies a border width of 2px to the top and bottom sides
.bxw2 border-left-width: 2px; border-right-width: 2px; Applies a border width of 2px to the left and right sides
.baw3 border-width: 4px Applies a border width of 4px to all sides
.btw3 border-top-width: 4px Applies a border width of 4px to the top side
.bbw3 border-bottom-width: 4px Applies a border width of 4px to the bottom side
.blw3 border-left-width: 4px Applies a border width of 4px to the left side
.brw3 border-right-width: 4px Applies a border width of 4px to the right side
.byw3 border-top-width: 4px; border-bottom-width: 4px; Applies a border width of 4px to the top and bottom sides
.bxw3 border-left-width: 4px; border-right-width: 4px; Applies a border width of 4px to the left and right sides
<div class="ba"></div>
<div class="ba brw0"></div>
<div class="ba bbw0"></div>
<div class="ba baw2"></div>
<div class="ba baw3"></div>
1px Border
0px Right border
0px Bottom border
2px border
4px border
Class Output Definition
.bas-solid border-style: solid Applies a solid border style to all sides
.bts-solid border-top-style: solid Applies a solid border style to the top side
.brs-solid border-right-style: solid Applies a solid border style to the right side
.bbs-solid border-bottom-style: solid Applies a solid border style to the bottom side
.bls-solid border-left-style: solid Applies a solid border style to the left side
.bas-dashed border-style: dashed Applies a dashed border style to all sides
.bts-dashed border-top-style: dashed Applies a dashed border style to the top side
.brs-dashed border-right-style: dashed Applies a dashed border style to the right side
.bbs-dashed border-bottom-style: dashed Applies a dashed border style to the bottom side
.bls-dashed border-left-style: dashed Applies a dashed border style to the left side
<div class="ba bas-solid"></div>
<div class="ba bas-dashed"></div>
<div class="ba brs-dashed"></div>
Solid border style
Dashed border style
Dashed border right style
Class Definition Dark mode?
.bc-transparent Transparent border color
.bc-white White border color
.bc-white-[x] Alpha stops for border color
.bc-black-[x] Black color stops for border colors
.bc-orange-[x] Orange color stops for border colors
.bc-blue-[x] Blue color stops for border colors
.bc-green-[x] Green color stops for border colors
.bc-powder-[x] Powder color stops for border colors
.bc-red-[x] Red color stops for border colors
.bc-yellow-[x] Yellow color stops for border colors
.bc-danger Danger border color alias
.bc-error Error border color alias
.bc-success Success border color alias
.bc-warning Warning border color alias
<div class="ba bc-transparent">Transparent</div>
Transparent border color
<div class="ba bc-black-900"></div>
<div class="ba bc-black-800"></div>
<div class="ba bc-black-750"></div>
<div class="ba bc-black-700"></div>
<div class="ba bc-black-600"></div>
<div class="ba bc-black-500"></div>
<div class="ba bc-black-400"></div>
<div class="ba bc-black-350"></div>
<div class="ba bc-black-300"></div>
<div class="ba bc-black-200"></div>
<div class="ba bc-black-150"></div>
<div class="ba bc-black-100"></div>
<div class="ba bc-black-075"></div>
<div class="ba bc-black-050"></div>
<div class="ba bc-black-025"></div>
Black 900
Black 800
Black 750
Black 700
Black 600
Black 500
Black 400
Black 350
Black 300
Black 200
Black 150
Black 100
Black 75
Black 50
Black 25
<div class="ba bc-white-3">White Border: Third Step</div>
<div class="ba bc-white-2">White Border: Second Step</div>
<div class="ba bc-white-1">White Border: First Step</div>
White Border: Third Step
White Border: Second Step
White Border: First Step
<div class="ba bc-orange-900"></div>
<div class="ba bc-orange-800"></div>
<div class="ba bc-orange-700"></div>
<div class="ba bc-orange-600"></div>
<div class="ba bc-orange-500"></div>
<div class="ba bc-orange-400"></div>
<div class="ba bc-orange-300"></div>
<div class="ba bc-orange-200"></div>
<div class="ba bc-orange-100"></div>
<div class="ba bc-orange-050"></div>
Orange 900
Orange 800
Orange 700
Orange 600
Orange 500
Orange 400
Orange 300
Orange 200
Orange 100
Orange 50
<div class="ba bc-blue-900"></div>
<div class="ba bc-blue-800"></div>
<div class="ba bc-blue-700"></div>
<div class="ba bc-blue-600"></div>
<div class="ba bc-blue-500"></div>
<div class="ba bc-blue-400"></div>
<div class="ba bc-blue-300"></div>
<div class="ba bc-blue-200"></div>
<div class="ba bc-blue-100"></div>
<div class="ba bc-blue-050"></div>
Blue 900
Blue 800
Blue 700
Blue 600
Blue 500
Blue 400
Blue 300
Blue 200
Blue 100
Blue 50
<div class="ba bc-powder-900"></div>
<div class="ba bc-powder-800"></div>
<div class="ba bc-powder-700"></div>
<div class="ba bc-powder-600"></div>
<div class="ba bc-powder-500"></div>
<div class="ba bc-powder-400"></div>
<div class="ba bc-powder-300"></div>
<div class="ba bc-powder-200"></div>
<div class="ba bc-powder-100"></div>
<div class="ba bc-powder-050"></div>
Powder 900
Powder 800
Powder 700
Powder 600
Powder 500
Powder 400
Powder 300
Powder 200
Powder 100
Powder 50

Green borders can also be declared using our .bc-success alias class.

<div class="ba bc-green-900"></div>
<div class="ba bc-green-800"></div>
<div class="ba bc-green-700"></div>
<div class="ba bc-green-600"></div>
<div class="ba bc-green-500"></div>
<div class="ba bc-green-400"></div>
<div class="ba bc-green-300"></div>
<div class="ba bc-green-200"></div>
<div class="ba bc-green-100"></div>
<div class="ba bc-green-050"></div>
<div class="ba bc-green-025"></div>
Green 900
Green 800
Green 700
Green 600
Green 500
Green 400
Green 300
Green 200
Green 100
Green 50
Green 25

Red borders can also be declared using our .bc-error and .bc-danger alias classes.

<div class="ba bc-red-900"></div>
<div class="ba bc-red-800"></div>
<div class="ba bc-red-700"></div>
<div class="ba bc-red-600"></div>
<div class="ba bc-red-500"></div>
<div class="ba bc-red-400"></div>
<div class="ba bc-red-300"></div>
<div class="ba bc-red-200"></div>
<div class="ba bc-red-100"></div>
<div class="ba bc-red-050"></div>
Red 900
Red 800
Red 700
Red 600
Red 500
Red 400
Red 300
Red 200
Red 100
Red 50

Yellow borders can also be declared using our .bc-warning alias class.

<div class="ba bc-yellow-900"></div>
<div class="ba bc-yellow-800"></div>
<div class="ba bc-yellow-700"></div>
<div class="ba bc-yellow-600"></div>
<div class="ba bc-yellow-500"></div>
<div class="ba bc-yellow-400"></div>
<div class="ba bc-yellow-300"></div>
<div class="ba bc-yellow-200"></div>
<div class="ba bc-yellow-100"></div>
<div class="ba bc-yellow-050"></div>
Yellow 900
Yellow 800
Yellow 700
Yellow 600
Yellow 500
Yellow 400
Yellow 300
Yellow 200
Yellow 100
Yellow 50