Borders

Stacks provides atomic classes for borders.

Classes

Class	Output	Apply border to
`.ba`	border: solid 1px	All sides
`.bt`	border-top: solid 1px	Top
`.bb`	border-bottom: solid 1px	Bottom
`.bl`	border-left: solid 1px	Left
`.br`	border-right: solid 1px	Right
`.by`	border-top: solid 1px; border-bottom: solid 1px;	Top and bottom
`.bx`	border-left: solid 1px; border-right: solid 1px;	Left and right

Examples

<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 sides

Top

Bottom

Left

Right

Top and bottom

Left and right

Width

Width classes

Class	Output	Border width, side(s)
`.baw0`	border-width: 0	Zero, all sides
`.btw0`	border-top-width: 0	Zero, top
`.bbw0`	border-bottom-width: 0	Zero, bottom
`.blw0`	border-left-width: 0	Zero, left
`.brw0`	border-right-width: 0	Zero, right
`.byw0`	border-top-width: 0; border-bottom-width: 0;	Zero, top and bottom
`.bxw0`	border-left-width: 0; border-right-width: 0;	Zero, left and right
`.baw1`	border-width: 1px	1px, all
`.btw1`	border-top-width: 1px	1px, top
`.bbw1`	border-bottom-width: 1px	1px, bottom
`.blw1`	border-left-width: 1px	1px, left
`.brw1`	border-right-width: 1px	1px, right
`.byw1`	border-top-width: 1px; border-bottom-width: 1px;	1px, top and bottom
`.bxw1`	border-left-width: 1px; border-right-width: 1px;	1px, left and right
`.baw2`	border-width: 2px	2px, all
`.btw2`	border-top-width: 2px	2px, top
`.bbw2`	border-bottom-width: 2px	2px, bottom
`.blw2`	border-left-width: 2px	2px, left
`.brw2`	border-right-width: 2px	2px, right
`.byw2`	border-top-width: 2px; border-bottom-width: 2px;	2px, top and bottom
`.bxw2`	border-left-width: 2px; border-right-width: 2px;	2px, left and right
`.baw3`	border-width: 4px	4px, all
`.btw3`	border-top-width: 4px	4px, top
`.bbw3`	border-bottom-width: 4px	4px, bottom
`.blw3`	border-left-width: 4px	4px, left
`.brw3`	border-right-width: 4px	4px, right
`.byw3`	border-top-width: 4px; border-bottom-width: 4px;	4px, top and bottom
`.bxw3`	border-left-width: 4px; border-right-width: 4px;	4px, left and right

Width examples

<div class="ba">…</div>
<div class="ba brw0">…</div>
<div class="ba bbw0">…</div>
<div class="ba baw2">…</div>
<div class="ba baw3">…</div>

.ba

.ba.brw0

.ba.bbw0

.ba.baw2

.ba.baw3

Style

Style classes

Class	Output	Side(s)
`.bas-solid`	border-style: solid	All sides
`.bts-solid`	border-top-style: solid	Top
`.brs-solid`	border-right-style: solid	Right
`.bbs-solid`	border-bottom-style: solid	Bottom
`.bls-solid`	border-left-style: solid	Left
`.bas-dashed`	border-style: dashed	All sides
`.bts-dashed`	border-top-style: dashed	Top
`.brs-dashed`	border-right-style: dashed	Right
`.bbs-dashed`	border-bottom-style: dashed	Bottom
`.bls-dashed`	border-left-style: dashed	Left

Style examples

<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

Color

Each color stop is available as a border class. See the colors documentation for all available classes.