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 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
| 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 |
<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
| 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 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
| 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 |
<div class="ba bc-transparent">Transparent</div>Transparent border color
<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
<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
<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
<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
<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 borders can also be declared using our .bc-success alias class.
<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 borders can also be declared using our .bc-error and .bc-danger alias classes.
<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 borders can also be declared using our .bc-warning alias class.
<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