Borders

Borders
Class Description Quick Example
.border
.border-primary .border-secondary .border-success .border-danger .border-info .border-pink .border-indigo .border-purple .border-dark

.border-*-soft
Responsive only
.border-top-lg .border-top-md .border-top-xs .border-bottom-lg .border-bottom-md .border-bottom-xs

Apply a border color.
Can be mixed with .bw--* and .border-[dotted|dashed]

If element has no predefined border, should be added .border

Responsive classes - apply a border only for specified viewport (lg|md|xs). Used instead of border-top|bottom in some responsive situations.

.border
.border .border-primary
.border .border-success
.border .border-danger .border-dashed
.border .border-warning .border-dashed .bw--2
.border-top .border-right .border-bottom .border-left Apply a specific border (you can mix them).
Also you can mix with .bw--* and any border color (see below).
.border-top
.border-right
.border-left
.border-bottom
.border-left .border-right
.border-top .border-bottom
.border-left .border-danger
.border-left .border-warning .bw--3
.rounded .rounded-xl .rounded-circle
.row-pill 		Border radius - can be mixed with almost any block/box/element.
.border .border-primary .rounded
.border .border-primary .rounded-xl
.border .border-primary .row-pill
.shadow-lg .rounded
.shadow-lg .row-pill
.w--80 .h--80 .rounded-circle
.bw--1 .bw--2 .bw--3

Change the border width (in pixels) of any bordered element.

3 border width added by default in _core/utils/_variables.scss
$util-border-val: 0 1 2 3 !default;

You can also mix with color borders:
.border-[primary|danger|warning|success|pink|indigo|purple]
.border-[top|right|left|bottom]

If element has no predefined border, should be added .border

.bw--2
.bw--3
.bw--2 .border-danger
.bw--3 .border-left border-warning
.border-solid .border-dotted .border-dashed .border-gray-400 Apply a border style. Can also be mixed with border colors & width.

.border-gray-400 is the input/select border color, if any element need looks the same
.border-primary .border-solid
.border-primary .border-dotted
.border-primary .border-dashed
.border-primary .border-dashed .bw--1
.border-gray-400
.border-transparent Instead of removing a border, there are situations where just transparent is needed, to keep the alingnment in place.
.b--0 .bt--0, .bt-0 .br--0, .br-0 .bb--0, .bb-0 .bl--0, .bl-0 .bx-0, .by-0 Remove specific border:
.b--0 = all borders (same as bootstrap .border-0)
.bt--0 = border top
.br--0 = border right
.bb--0 = border bottom
.bl--0 = border left

.bx-0 = border left & right (x axis)

.by-0 = border top & bottom (y axis)

Added additional b*-0 because bootstrap already use .b-0 so we can have the all "set".