Bootstrap 4 Borders


Bootstrap 4 Borders

Using Border's utility classes in Bootstrap, we can customize the borders of different elements of HTML and change the style of border-radius.


Border

With Border Utilities we can add or remove borders with any element and put all the borders at the same time or put the border on any one side.

Border Adding

<div class="border bg-light mr-3" style="height: 50px;width: 50px;"></div>
<div class="border-top bg-light mr-3" style="height: 50px;width: 50px;"></div>
<div class="border-bottom bg-light mr-3" style="height: 50px;width: 50px;"></div>
<div class="border-left bg-light mr-3" style="height: 50px;width: 50px;"></div>
<div class="border-right bg-light mr-3" style="height: 50px;width: 50px;"></div>

Border Colors

To change the colors of the border, we have to add a contextual class with the .border class.

<div class="border bg-light border-primary m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-secondary m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-info m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-success m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-warning m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-danger m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-dark m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-light m-2" style="height: 50px;width: 50px;"></div>
<div class="border bg-light border-white m-2" style="height: 50px;width: 50px;"></div>

Border Subtractive

<div class="border-0 bg-light m-2" style="height: 50px;width: 50px;"></div>
<div class="border border-top-0 bg-light m-2" style="height: 50px;width: 50px;"></div>
<div class="border border-bottom-0 bg-light m-2" style="height: 50px;width: 50px;"></div>
<div class="border border-left-0 bg-light m-2" style="height: 50px;width: 50px;"></div>
<div class="border border-right-0 bg-light m-2" style="height: 50px;width: 50px;"></div>

Border-Radius

Add classes to an element to easily round its corners.

<div class="rounded-0 bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-top bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-bottom bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-left bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-right bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-pill bg-success m-2" style="height: 50px;width: 50px;"></div>
<div class="rounded-circle bg-success m-2" style="height: 50px;width: 50px;"></div>