Adding Border
You can use border utilities to add borders on all sides or individually on an element.
<div class="_border"></div>
<div class="_border-top"></div>
<div class="_border-right"></div>
<div class="_border-bottom"></div>
<div class="_border-left"></div>
Removing Border
You can use border utilities to remove borders on all sides or individually on an element.
<div class="_border-0"></div>
<div class="_border-top-0"></div>
<div class="_border-right-0"></div>
<div class="_border-bottom-0"></div>
<div class="_border-left-0"></div>
Border Color
You can use border addition and removal utilities together with border color utilities to set their color.
<div class="_border-color-primary"></div>
<div class="_border-color-secondary"></div>
<div class="_border-color-light"></div>
<div class="_border-color-dark"></div>
<div class="_border-color-white"></div>
<div class="_border-color-gray-10"></div>
<div class="_border-color-gray-20"></div>
<div class="_border-color-gray-30"></div>
<div class="_border-color-gray-40"></div>
<div class="_border-color-gray-50"></div>
<div class="_border-color-gray-60"></div>
<div class="_border-color-gray-70"></div>
<div class="_border-color-gray-80"></div>
<div class="_border-color-gray-90"></div>
<div class="_border-color-black"></div>
<div class="_border-color-info"></div>
<div class="_border-color-success"></div>
<div class="_border-color-warning"></div>
<div class="_border-color-danger"></div>
Position specific border colors are also available. Use ._border-{position}-color-{variant}
to set the color of a specific border side (i.e. ._border-top-color-primary
).
Border Radius
You can use border radius utilities to add rounded corners to your elements.
<div class="_rounded"></div>
<div class="_rounded-top"></div>
<div class="_rounded-right"></div>
<div class="_rounded-bottom"></div>
<div class="_rounded-left"></div>
<div class="_rounded-top-left"></div>
<div class="_rounded-top-right"></div>
<div class="_rounded-bottom-right"></div>
<div class="_rounded-bottom-left"></div>
<div class="_rounded-circle"></div>
<div class="_rounded-0"></div>