Borders

Stacks provides atomic classes for borders.

To apply a border, .b[direction] classes are provided. The default border properties are border-width: 1px; and border-style: solid;. The browser default border color is black (#000). To supply a border-color, use the border color classes.

Border Classes

Abbreviation Definition
ba border
bt border-top
bb border-bottom
bl border-left
br border-right
by border-top, border-bottom
bx border-left, border-right
0 0px
1 1px
2 2px
3 4px
4 8px

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

Abbreviation Definition
baw border-width
btw border-top-width
bbw border-bottom-width
blw border-left-width
brw border-right-width
byw border-top-width, border-bottom-width
bxw border-left-width, border-right-width
0 0px
1 1px
2 2px
3 4px
4 8px

Width Examples

1
2
3
4
5
6
7
<div class="ba baw0">0px</div>
<div class="bt btw1 bc-orange-3">1px</div>
<div class="br brw2 bc-orange-3">2px</div>
<div class="bb bbw3 bc-orange-3">4px</div>
<div class="bl blw4 bc-orange-3">8px</div>
<div class="bx bxw4 bc-orange-3">8px</div>
<div class="by byw4 bc-orange-3">8px</div>
0px border
1px Top Border
2px Right Border
4px Bottom Border
8px Left Border
8px X Border
8px Y Border

Style

Style Classes

Abbreviation Definition
bas- border-style
bts- border-top-style
brs- border-right-style
bbs- border-bottom-style
bls- border-left-style
solid Solid line style
dashed Dashed line style

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

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

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

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