Borders

The border classes allow you to easily create borders on the fly. Choose from all different sides (top, right, bottom & left) as well as all sides.

All border classes shown below are prefixed with b-{side}-{shade} where side is t, r, b, l, (top, right, bottom or left) and optional and shade being light or dark, which is optional too.

b

b-light

b-dark

b-t

b-r

b-b-light

b-l-dark

Border Radius

The border classes help you to create borders on the fly easily. Choose from all different sides (top, right, bottom & left) as well as all sides.

Class	Properties
.br	border-radius: 0.25em;
.br-sm	border-radius: 0.5em;
.br-lg	border-radius: 1em;
.br-circle	border-radius: 100%;
.br-none	border-radius: none;
.br-top-left	border-top-left-radius: 0.5em;
.br-top-right	border-top-right-radius: 0.5em;
.br-bottom-left	border-bottom-left-radius: 0.5em;
.br-bottom-right	border-bottom-right-radius: 0.5em;
.br-top	border-top-left-radius: 0.5em; border-top-right-radius: 0.5em;
.br-bottom	border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em;

br

br-sm

br-lg

br-circle

br-none

br-top

br-bottom

br-top-left

br-top-right

br-bottom-left

br-bottom-right

Change the default border colors, width and border radius with the variables below.

Variable	Value	Description
`$border-colors: ( default: rgba(0, 0, 0, 0.3), light: rgba(0, 0, 0, 0.1), dark: rgba(0, 0, 0, 0.6) );`	Map(name:color)	The name of the `border-colors` map corresponds to the class name (apart from default) and the color determines the color of that class name. Note: changing the default name var will throw an errror.
`$border-width: 1px;`	Pixel/em/rem	Width amount of borders in pixels, em's or rem's.
`$border-radius: 0.5em;`	Pixel/em/rem	The default border radius amount of the `br` (border-radius) class.
`$border-radius-small: 0.25em;`	Pixel/em/rem	The small border radius amount of the `br-sm` (border-radius) class.
`$border-radius-large: 1em;`	Pixel/em/rem	The large border radius amount of the `br-large` (border-radius) class.