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="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-white-3">White Border: Third Step</div>
<div class="bb bc-white-2">White Border: Second Step</div>
<div class="bb bc-white-1">White Border: First Step</div>White Border: Third Step
White Border: Second Step
White 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