Border Radius helpers

Controlling the border and border-radius of an element

Set the friendly border as b*value to an element or part of the side by writing short code with all directions:
example: b-1

Property	Shortcut	Classes ↓
Values →		`0`	`1px`	`2px`	`3px`	`4px`
`border`	`b`	`0`	`1`	`2`	`3`	`4`
`border-top`	`bt`	`0`	`1`	`2`	`3`	`4`
`border-right`	`br`	`0`	`1`	`2`	`3`	`4`
`border-bottom`	`bb`	`0`	`1`	`2`	`3`	`4`
`border-left`	`bl`	`0`	`1`	`2`	`3`	`4`
`border-left` and `border-right`	`bx`	`0`	`1`	`2`	`3`	`4`
`border-top` and `border-bottom`	`by`	`0`	`1`	`2`	`3`	`4`

Color

Class	Demo
`bc-transparent`	transparent
`bc-white`	white
`bc-black`	black
`bc-light`	light
`bc-dark`	dark
`bc-primary`	primary
`bc-mix`	mix
`bc-info`	info
`bc-success`	success
`bc-warning`	warning
`bc-danger`	danger

Style

Class	Demo
`bs-none`	none
`bs-dashed`	dashed
`bs-dotted`	dotted
`bs-solid`	solid

Radius

<img class="r-0" src="/static/placeholders/64x64.png">
<img class="r-1" src="/static/placeholders/64x64.png">
<img class="r-2" src="/static/placeholders/64x64.png">
<img class="r-3" src="/static/placeholders/64x64.png">
<img class="is-circle" src="/static/placeholders/64x64.png">
        
         
<img class="rl-3" src="/static/placeholders/64x64.png">
<img class="rt-3" src="/static/placeholders/64x64.png">
<img class="rr-3" src="/static/placeholders/64x64.png">
<img class="rb-3" src="/static/placeholders/64x64.png">

Configuration

Because every developer has their own preferences, and to satisfy Buval's customization features, it's possible to specify your own class name shortcuts as well as the border values.

// Border
$border-shortcuts: ("border": "b");
$border-directions: (
    "top": ("t", "y"),
    "right": ("r", "x"),
    "bottom": ("b", "y"),
    "left": ("l", "x")
);
$border-values: (
    "0": 0,
    "1": 1px,
    "2": 2px,
    "3": 3px,
    "4": 4px
);

// Border Color
$border-color-shortcuts: ("border-color": "bc");
$border-color-values: $colors;

// Border Style
$border-style-shortcuts: ("border-style": "bs");
$border-style-value: (
    "none": none,
    "dotted": dotted,
    "dashed": dashed,
    "solid": solid
);

// Border Radius
$border-radius-shortcuts: "br";
$border-radius-directions: (
    "top-left": ("t", "l"),
    "top-right": ("t", "r"),
    "bottom-left": ("b", "l"),
    "bottom-right": ("b", "r")
);
$border-radius-values: (
    "0": 0,
    "1": $radius-small,
    "2": $radius,
    "3": $radius-large
);