#less.style-library() v2.0.0Documentation
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)
1#border.solid();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();1#border.radius(20px);1#border.radius(top);1#border.radius(bottom, 8px);1#border.radius(left, 10px);1#border.radius(right, 50px);