Borders

Stacks provides atomic classes for borders.

Border 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

Border 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

Abbreviation Definition
bc- border-color
-transparent Transparent border color
-white White border color
-white-[X] Alpha stops for border color
-black-[X] Black color stops for border colors
-orange-[X] Orange color stops for border colors
-blue-[X] Blue color stops for border colors
-green-[X] Green color stops for border colors
-powder-[X] Powder color stops for border colors
-red-[X] Red color stops for border colors
-yellow-[X] Yellow color stops for border colors

Clear

1
<div class="ba bc-black-9 bc-transparent">Transparent</div>
Transparent Bottom Border Style

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

Border Radius

Border Radius Classes

Abbreviation Definition
bar border-radius
btr border-top-left-radius, border-top-right-radius
bbr border-bottom-left-radius, border-bottom-right-radius
brr border-top-right-radius, border-bottom-right-radius
blr border-top-left-radius, border-bottom-left-radius
0 0px
sm 3px
md 5px
lg 7px
-circle Creates circle object (100%)

All Corners

1
2
3
4
5
<div class="bar0">0px Border Radius</div>
<div class="bar-sm">3px Border Radius</div>
<div class="bar-md">5px Border Radius</div>
<div class="bar-lg">7px Border Radius</div>
<div class="bar-circle">Circle Border Radius</div>
0px Border Radius
3px Border Radius
5px Border Radius
7px Border Radius
Circle Border Radius

Top Corners

1
2
3
4
5
<div class="btr0">0px Top Border Radius</div>
<div class="btr-sm">3px Top Border Radius</div>
<div class="btr-md">5px Top Border Radius</div>
<div class="btr-lg">7px Top Border Radius</div>
<div class="btr-circle">Circle Top Border Radius</div>
0px Top Border Radius
3px Top Border Radius
5px Top Border Radius
7px Top Border Radius
Circle Top Border Radius

Bottom Corners

1
2
3
4
5
<div class="bbr0">0px Bottom Border Radius</div>
<div class="bbr-sm">3px Bottom Border Radius</div>
<div class="bbr-md">5px Bottom Border Radius</div>
<div class="bbr-lg">7px Bottom Border Radius</div>
<div class="bbr-circle">Circle Bottom Border Radius</div>
0px Bottom Border Radius
3px Bottom Border Radius
5px Bottom Border Radius
7px Bottom Border Radius
Circle Bottom Border Radius

Left Corners

1
2
3
4
5
<div class="blr0">0px Left Border Radius</div>
<div class="blr-sm">3px Left Border Radius</div>
<div class="blr-md">5px Left Border Radius</div>
<div class="blr-lg">7px Left Border Radius</div>
<div class="blr-circle">Circle Left Border Radius</div>
0px Left Border Radius
3px Left Border Radius
5px Left Border Radius
7px Left Border Radius
Circle Left Border Radius

Right Corners

1
2
3
4
5
<div class="brr0">0px Right Border Radius</div>
<div class="brr-sm">3px Right Border Radius</div>
<div class="brr-md">5px Right Border Radius</div>
<div class="brr-lg">7px Right Border Radius</div>
<div class="brr-circle">Circle Right Border Radius</div>
0px Right Border Radius
3px Right Border Radius
5px Right Border Radius
7px Right Border Radius
Circle Right Border Radius