Border
Used to set border properties
Class Reference
.bn
border-style: none;
border-width: 0;
.ba
border-style: solid;
border-width: 1px;
border-color: #000;
.bt
border-top-style: solid;
border-top-width: 1px;
border-color: #000;
.br
border-right-style: solid;
border-right-width: 1px;
border-color: #000;
.bb
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000;
.bl
border-left-style: solid;
border-left-width: 1px;
border-color: #000;
.bx
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-color: #000;
.by
border-top-style: solid;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000;
Example
No Border
All Borders
Only Border Top
Only Border right
Only Border bottom
Only Border left
Borders left and right
Borders top and bottom
<div className="bn">No Border</div>
<div className="ba">All Borders</div>
<div className="bt">Only Border Top</div>
<div className="br">Only Border right</div>
<div className="bb">Only Border bottom</div>
<div className="bl">Only Border left</div>
<div className="bx">Borders left and right</div>
<div className="by">Borders top and bottom</div>
Style
Used to set the border style.
.bs-none
border-style: none;
.bs-solid
border-style: solid;
.bs-dashed
border-style: dashed;
.bs-dotted
border-style: dotted;
Example
No Border style
Solid Border
Only Top Solid Border
Dashed Border
Dotted Border
<div className="bs-none">No Border Style</div>
<div className="ba bs-solid">Solid Border</div>
<div className="bt bs-solid">Only Top Solid Border</div>
<div className="ba bs-dashed">Dashed Border</div>
<div className="ba bs-dotted">Dotted Border</div>
Width
Used to set the border width. Possible values are 1,2,4 and 8.
Example
1px Border Width
2px Border Width
4px Border Width
4px Border Width on left and right
8px Border Width
<div className="ba bw-1">...</div>
<div className="ba bw-2">...</div>
<div className="ba bw-4">...</div>
<div className="bx bw-4">...</div>
<div className="ba bw-8">...</div>
Border Radius
Used to set the border radius. Possible values are : 0,2,3 and 100.
.btr-2
border-top-left-radius: 2px;
border-top-right-radius: 2px;
.bbr-2
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
.blr-2
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
.brr-2
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
Example
No border radius
100px border radius
2px Top left and right border radius
2px Bottom left and right border radius
<div className="ba br-0">...</div>
<div className="ba br-100">...</div>
<div className="ba btr-2">...</div>
<div className="ba bbr-2">...</div>
Border Color
Used to set the border color. The syntax is .bc-{palette}-{shade}
.
.bc-secondary-400
border-color: #6290E0;
Example
<div class="ba bc-secondary-400">...</div>