CSS Border modifiers

Description:
Provides a common system for setting border properties between HTML elements.

Usage:
Mark the element with the desired border class.

Complete acronym reference based on Emmet:

FIRST 2 LETTERS
bd = border

THIRD LETTERS
a = all
t = top
r = right
b = bottom
l = left
h = horizontal
v = vertical

LAST LETTER
n = none
s = small (1px)
m = medium
l = large
xl = extra large



@if $ui != true {
.bda-n {
border-width: 0 !important;
}

.bdt-n, .bdv-n {
border-top-width: 0 !important;
}

.bdb-n, .bdv-n {
border-bottom-width: 0 !important;
}

.bdr-n, .bdh-n {
border-right-width: 0 !important;
}

.bdl-n, .bdh-n {
border-left-width: 0 !important;
}

.bda-s {
border-width: 1px !important;
}

.bdt-s, .bdv-s {
border-top-width: 1px !important;
}

.bdb-s, .bdv-s {
border-bottom-width: 1px !important;
}

.bdr-s, .bdh-s {
border-right-width: 1px !important;
}

.bdl-s, .bdh-s {
border-left-width: 1px !important;
}

.bda-m {
border-width: $spacing/4 !important;
}

.bdt-m, .bdv-m {
border-top-width: $spacing/4 !important;
}

.bdb-m, .bdv-m {
border-bottom-width: $spacing/4 !important;
}

.bdr-m, .bdh-m {
border-right-width: $spacing/4 !important;
}

.bdl-m, .bdh-m {
border-left-width: $spacing/4 !important;
}

.bda-l {
border-width: $spacing/2 !important;
}

.bdt-l, .bdv-l {
border-top-width: $spacing/2 !important;
}

.bdb-l, .bdv-l {
border-bottom-width: $spacing/2 !important;
}

.bdr-l, .bdh-l {
border-right-width: $spacing/2 !important;
}

.bdl-l, .bdh-l {
border-left-width: $spacing/2 !important;
}

.bda-xl {
border-width: $spacing !important;
}

.bdt-xl, .bdv-xl {
border-top-width: $spacing !important;
}

.bdb-xl, .bdv-xl {
border-bottom-width: $spacing !important;
}

.bdr-xl, .bdh-xl {
border-right-width: $spacing !important;
}

.bdl-xl, .bdh-xl {
border-left-width: $spacing !important;
}
}
<!-- Image Circle default -->
<img src="../static/img/chuck.jpg" class="image-circle" width="150" />

<!-- Image Circle width border small -->
<img src="../static/img/chuck.jpg" class="image-circle bda-s" width="150" />

<!-- Image Circle width border medium -->
<img src="../static/img/chuck.jpg" class="image-circle bda-m" width="150" />

<!-- Image Circle width border large -->
<img src="../static/img/chuck.jpg" class="image-circle bda-l" width="150" />

<!-- Image Circle width border extra large -->
<img src="../static/img/chuck.jpg" class="image-circle bda-xl" width="150" />