Border mixins

Designed to easily add any type of border to an element

There are 2 types of Border Mixins:

  • Border Styles
  • Border Radius

All Border Mixins follow a naming pattern.

Border Style Mixins

1#border.border-style(@position, @border-width, @border-color);

Parameter Options:

  • The border-style options are: solid, dotted and dashed
  • The position parameter is optional
  • The position options are top, bottom, left, right, vertical and horizontal
  • The border-width default value is 1px
  • The border-color default value is black

Border Radius Mixins

1#border.radius(@position, @value);

Parameter Options:

  • The position parameter is optional
  • The position options are top, bottom, left and right
  • The default value is set to the @settings[radius] value

Usage Examples:

Black solid 1px border (default)
If you want a 4px solid red border you can pass in the border width of 4px, and the desired color.
1#border.dotted(4px, #f00);
If you want a 2px green top border only you pass in top (or bottom / left / right), border-width value and color
1#border.dashed(top, 2px, green);
If you need paralell top & bottom or left & right borders pass in vertical or horizontal:
1#border.solid(vertical, 4px, #333);
1#border.solid(horizontal, 4px, @color[primary]);
Add a 6px black left border
1#border.solid(left, 6px, black);
Useful border-radius mixins when we need a top left and right radius or bottom left and right radius.
1#border.radius(bottom, 8px);
1#border.radius(left, 10px);
1#border.radius(right, 50px);