Borders

Stacks provides atomic classes for borders.

Classes

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

Examples

1
2
3
4
5
6
7
<div class="ba bc-orange-3">All borders</div>
<div class="bt bc-orange-3">Top border</div>
<div class="br bc-orange-3">Right border</div>
<div class="bb bc-orange-3">Bottom border</div>
<div class="bl bc-orange-3">Left border</div>
<div class="bx bc-orange-3">X border</div>
<div class="by bc-orange-3">Y border</div>
All borders
Top border
Right border
Bottom border
Left border
X border
Y border

Width

Width classes

Class Output Definition
.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

Width examples

1
2
3
4
5
<div class="ba bc-orange-3"></div>
<div class="ba brw0 bc-orange-3"></div>
<div class="ba bbw0 bc-orange-3"></div>
<div class="ba baw2 bc-orange-3"></div>
<div class="ba baw3 bc-orange-3"></div>
1px Border
0px Right border
0px Bottom border
2px border
4px border

Style

Style classes

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

Style examples

1
2
3
<div class="ba bas-solid bc-orange-3">Solid style</div>
<div class="ba bas-dashed bc-orange-3">Dashed style</div>
<div class="ba brs-dashed bc-orange-3">Dashed style</div>
Solid border style
Dashed border style
Dashed border right style

Color

Color classes

Class Definition
.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

Transparent

1
<div class="ba bc-transparent">Transparent</div>
Transparent border color

White

1
2
3
4
5
6
7
8
9
10
<div class="bb bc-white">White border</div>
<div class="bb bc-white-9">90% White Border</div>
<div class="bb bc-white-8">80% White Border</div>
<div class="bb bc-white-7">70% White Border</div>
<div class="bb bc-white-6">60% White Border</div>
<div class="bb bc-white-5">50% White Border</div>
<div class="bb bc-white-4">40% White Border</div>
<div class="bb bc-white-3">30% White Border</div>
<div class="bb bc-white-2">20% White Border</div>
<div class="bb bc-white-1">10% White Border</div>
White Border
90% White Border
80% White Border
70% White Border
60% White Border
50% White Border
40% White Border
30% White Border
20% White Border
10% White Border

Black

1
2
3
4
5
6
7
8
9
10
<div class="bb bc-black-10">Black Border: Tenth Step</div>
<div class="bb bc-black-9">Black Border: Ninth Step</div>
<div class="bb bc-black-8">Black Border: Eighth Step</div>
<div class="bb bc-black-7">Black Border: Seventh Step</div>
<div class="bb bc-black-6">Black Border: Sixth Step</div>
<div class="bb bc-black-5">Black Border: Fifth Step</div>
<div class="bb bc-black-4">Black Border: Fourth Step</div>
<div class="bb bc-black-3">Black Border: Third Step</div>
<div class="bb bc-black-2">Black Border: Second Step</div>
<div class="bb bc-black-1">Black Border: First Step</div>
Black Border: Tenth Step
Black Border: Ninth Step
Black Border: Eighth Step
Black Border: Seventh Step
Black Border: Sixth Step
Black Border: Fifth Step
Black Border: Fourth Step
Black Border: Third Step
Black Border: Second Step
Black Border: First Step

Orange

1
2
3
<div class="bb bc-orange-3">Dark orange border</div>
<div class="bb bc-orange-2">Orange border</div>
<div class="bb bc-orange-1">Light orange border</div>
Dark Orange Border
Orange Border
Light Orange Border

Blue

1
2
3
<div class="bb bc-blue-3">Dark blue border</div>
<div class="bb bc-blue-2">Blue border</div>
<div class="bb bc-blue-1">Light blue border</div>
Dark blue Border
Blue border
Light blue border

Powder

1
2
3
<div class="bb bc-powder-3">Dark powder border</div>
<div class="bb bc-powder-2">Powder border</div>
<div class="bb bc-powder-1">Light powder border</div>
Dark powder border
Powder border
Light powder border

Green

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

1
2
3
<div class="bb bc-green-3">Dark green border</div>
<div class="bb bc-green-2">Green border</div>
<div class="bb bc-green-1">Light green border</div>
Dark green border
Green border
Light green border

Red

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

1
2
3
<div class="bb bc-red-3">Dark red Border</div>
<div class="bb bc-red-2">Red border</div>
<div class="bb bc-red-1">Light red border</div>
Dark red border
Red border
Light red border

Yellow

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

1
2
3
<div class="bb bc-yellow-3">Dark yellow Border</div>
<div class="bb bc-yellow-2">Yellow border</div>
<div class="bb bc-yellow-1">Light yellow border</div>
Dark yellow border
Yellow border
Light yellow border