Border

Used to set border properties

Class Reference

Class
Output
.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.

Class
Output
.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.

Class
Output
.bw-1
border-width: 1px;
.bw-2
border-width: 2px;
.bw-4
border-width: 4px;
.bw-8
border-width: 8px;

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.

Class
Output
.br-0
border-radius: 0px
.br-2
border-radius: 2px;
.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}.

Class
Output
.bc-secondary-400
border-color: #6290E0;

Example

Colored border
<div class="ba bc-secondary-400">...</div>
Back to: Background
See next: Box Shadow

CONTENTS