Borders

Stacks provides atomic classes for borders.

Classes

Class	Output	Apply border to
`.ba`	border: solid 1px #000	all sides
`.bt`	border-top: solid 1px #000	top
`.bb`	border-bottom: solid 1px #000	bottom
`.bl`	border-left: solid 1px #000	left
`.br`	border-right: solid 1px #000	right
`.by`	border-top: solid 1px #000; border-bottom: solid 1px #000;	top and bottom
`.bx`	border-left: solid 1px #000; border-right: solid 1px #000;	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	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

<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

Color classes

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

Edit on GitHub