Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border direction
The following border utilities classes will add border to any side of an element.
<div class= "w-5 h-5 bg-light border" ></div>
<div class= "w-5 h-5 bg-light border-top" ></div>
<div class= "w-5 h-5 bg-light border-end" ></div>
<div class= "w-5 h-5 bg-light border-bottom" ></div>
<div class= "w-5 h-5 bg-light border-start" ></div>
<div class= "w-5 h-5 bg-light border-x" ></div>
<div class= "w-5 h-5 bg-light border-y" ></div>
Border size
Below are the available border size utilities classes.
<div class= "w-5 h-5 bg-light border-0" ></div>
<div class= "w-5 h-5 bg-light border" ></div>
<div class= "w-5 h-5 bg-light border-wide" ></div>
Remove border
You can remove a border on a single side of an element by using the following border utilities classes.
<div class= "w-5 h-5 bg-light border border-top-0" ></div>
<div class= "w-5 h-5 bg-light border border-end-0" ></div>
<div class= "w-5 h-5 bg-light border border-bottom-0" ></div>
<div class= "w-5 h-5 bg-light border border-start-0" ></div>
<div class= "w-5 h-5 bg-light border border-x-0" ></div>
<div class= "w-5 h-5 bg-light border border-y-0" ></div>
Border color
You can set a border color of any side of an element by adding the following utilities classes below.
<div class= "w-5 h-5 bg-light border border-primary" ></div>
<div class= "w-5 h-5 bg-light border border-secondary" ></div>
<div class= "w-5 h-5 bg-light border border-success" ></div>
<div class= "w-5 h-5 bg-light border border-warning" ></div>
<div class= "w-5 h-5 bg-light border border-danger" ></div>
<div class= "w-5 h-5 bg-light border border-info" ></div>
<div class= "w-5 h-5 bg-light border border-light" ></div>
<div class= "w-5 h-5 bg-light border border-dark" ></div>
Border radius
You can set a border to any element by using the following utilities classes below.
<div class= "w-5 h-5 bg-light border rounded-0" ></div>
<div class= "w-5 h-5 bg-light border rounded" ></div>
<div class= "w-5 h-5 bg-light border rounded-1" ></div>
<div class= "w-5 h-5 bg-light border rounded-2" ></div>
<div class= "w-5 h-5 bg-light border rounded-3" ></div>
<div class= "w-5 h-5 bg-light border rounded-circle" ></div>