Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Bootstrap documentation


Additive

<div class="border"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

Subtractive

<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

<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-light"></div>
<div class="border border-dark"></div>
<div class="border border-white"></div>

Border theme

<div class="border-theme border-top"></div>
<div class="border-theme border-top-lg"></div>

Border radius

........................
<img class="rounded" src="..." alt="...">
<img class="rounded-top" src="..." alt="...">
<img class="rounded-right" src="..." alt="...">
<img class="rounded-bottom" src="..." alt="...">
<img class="rounded-left" src="..." alt="...">
<img class="rounded-circle" src="..." alt="...">
<img class="rounded-pill" src="..." alt="...">
<img class="rounded-0" src="..." alt="...">

Sizes

.........
<img class="rounded-lg" src="..." alt="...">
<img class="rounded" src="..." alt="...">
<img class="rounded-sm" src="..." alt="...">