Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
Add borders to custom elements:
<span class="border-1"></span>
<span class="border-t-1"></span>
<span class="border-r-1"></span>
<span class="border-b-1"></span>
<span class="border-l-1"></span>Subtractive
Or remove borders:
<span class="border-1 border-0"></span>
<span class="border-1 border-t-0"></span>
<span class="border-1 border-r-0"></span>
<span class="border-1 border-b-0"></span>
<span class="border-1 border-l-0"></span>Color
Change the border color using utilities built on our theme colors.
<span class="border-1 wui-border--active"></span>
<span class="border-1 wui-border--active-30"></span>
<span class="border-1 wui-border--highlight"></span>
<span class="border-1 wui-border--highlight-30"></span>
<span class="border-1 wui-border--success"></span>
<span class="border-1 wui-border--success-30"></span>
<span class="border-1 wui-border--warning"></span>
<span class="border-1 wui-border--warning-30"></span>
<span class="border-1 wui-border--danger"></span>
<span class="border-1 wui-border--danger-30"></span>
<span class="border-1 wui-border--peach"></span>
<span class="border-1 wui-border--peach-30"></span>
<span class="border-1 wui-border--yangmei"></span>
<span class="border-1 wui-border--yangmei-30"></span>
<span class="border-1 wui-border--pitaya"></span>
<span class="border-1 wui-border--pitaya-30"></span>
<span class="border-1 wui-border--fig"></span>
<span class="border-1 wui-border--fig-30"></span>
<span class="border-1 wui-border--plum"></span>
<span class="border-1 wui-border--plum-30"></span>
<span class="border-1 wui-border--blueberry"></span>
<span class="border-1 wui-border--blueberry-30"></span>
<span class="border-1 wui-border--akebi"></span>
<span class="border-1 wui-border--akebi-30"></span>
<span class="border-1 wui-border--grapes"></span>
<span class="border-1 wui-border--grapes-30"></span>
<span class="border-1 wui-border--feijoa"></span>
<span class="border-1 wui-border--feijoa-30"></span>
<span class="border-1 wui-border--apple"></span>
<span class="border-1 wui-border--apple-30"></span>
<span class="border-1 wui-border--olive"></span>
<span class="border-1 wui-border--olive-30"></span>
<span class="border-1 wui-border--kiwano"></span>
<span class="border-1 wui-border--kiwano-30"></span>
<span class="border-1 wui-border--papaya"></span>
<span class="border-1 wui-border--papaya-30"></span>
<span class="border-1 wui-border--cherry-30"></span>
<span class="border-1 wui-border--cherry"></span>Width
<span class="border-1 border-w-3"></span>
<span class="border-t-1 border-w-3"></span>
<span class="border-r-1 border-w-3"></span>
<span class="border-b-1 border-w-3"></span>
<span class="border-l-1 border-w-3"></span>Radius
Add classes to an element to easily round its corners.
<span class="d-block rounded-circle wui-bg-color--gray-60" style="width: 75px; height: 75px"></span>Style
<span class="border-1 border--dashed"></span>
<span class="border-1 border--dashed wui-border--success"></span>
<span class="border-1 border--dashed wui-border--warning"></span>
<span class="border-1 border--dashed wui-border--danger"></span>