Borders

List of Border Utility Classes included with Canvas.

Classes

Class Description
.border-width-*

Applies the defined Border Width on the element.

Hover
Use .h-border-width-{value} to apply the Border Width on Hover

Option(s): 0 to 6

Ex:

<div class="border-width-1"></div>

.border-dotted

Sets the border-style CSS Property to dotted

.border-dashed

Sets the border-style CSS Property to dashed

.border-solid

Sets the border-style CSS Property to solid

.border-double

Sets the border-style CSS Property to double

Bootstrap Border Colors

Canvas has Option to extend the Bootstrap's Border Colors so that they can be applied on Hovers.

Example:
For .border-primary to be applied on Hover, use .h-border-primary instead

.border-ts

Applies Border Transitions on the Element

Ex:

<div class="border-ts border-primary h-border-success">

</div>

Last Modified: July 9, 2020