Utilities - Border

Use border utilities to quickly apply border styles to an element. Great for images, buttons, or any other element.

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:info"></div>

<div class="_border-color:success"></div>

<div class="_border-color:warning"></div>

<div class="_border-color:danger"></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>

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="_border-radius"></div>

<div class="_border-top-radius"></div>

<div class="_border-right-radius"></div>

<div class="_border-bottom-radius"></div>

<div class="_border-left-radius"></div>

<div class="_border-top-left-radius"></div>

<div class="_border-top-right-radius"></div>

<div class="_border-bottom-right-radius"></div>

<div class="_border-bottom-left-radius"></div>

<div class="_border-radius:circle"></div>

<div class="_border-radius:0"></div>