Borders

Stacks provides atomic classes for borders.

Class Output Apply border to Responsive?
.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
<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
Class Output Border width, side(s) Responsive?
.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
<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
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

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

Deprecated
All legacy border color classes are deprecated. Please use the current border color classes instead.

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

Deploys by Netlify