How to Add Borders using Bootstrap

You can quickly style the border and border-radius of an element. It can be used for images, buttons, blocks or any other element.

How to Add Borders using Bootstrap

1. Adding Borders

Use border utilities to add element's borders - either all four sides or one at a time.

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

2. Border Color

You can change the border color using any of the color classes. For example,

<span class="border border-info"></span>

3. Border Opacity

You can change the opacity of border color by adding .border-opacity utility class.

  • border-opacity-10
  • border-opacity-25
  • border-opacity-50
  • border-opacity-75

4. Border Width

You can also change the width of the border.

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

5. Border Radius

You can add classes to an element to easily round its corners. For example,

<img src="/..." alt="..." class="rounded">
<img src="/..." alt="..." class="rounded-top">
<img src="/..." alt="..." class="rounded-end">
<img src="/..." alt="..." class="rounded-bottom">
<img src="/..." alt="..." class="rounded-start">
<img src="/..." alt="..." class="rounded-circle">
<img src="/..." alt="..." class="rounded-pill">
<img src="/..." alt="..." class="rounded-0">

6. Rounded Size

You can use the scaling classes for larger or smaller rounded corners.

For example,

<img src="/..." class="rounded-5" alt="...">

Sizes range from 0 to 5.