Utilities

Effortlessly enhance your design with customizable borders and smooth border-radius options for polished, modern visuals.

For detail documentation, View Utilities on Bootstrap⟶

Border

Use border utilities to quickly style theborder of an element. Great for images, buttons, or any other element.

The classes are named using the format border-{side} for xs and border-{side}-{breakpoint}- for sm, md, lg, xl, and xxl.

Where side is one of:

  • top - for classes that set style for border-top
  • bottom - for classes that set style for border-bottom
  • start - for classes that set style for border-start
  • end - for classes that set style for margin-right
  • x - for classes that set both*-left and *-right
  • y - for classes that set both*-top and *-bottom
  • blank - for classes that set theborder style on all 4 side of the element.

Classes for adding borders

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

Classes for removing borders

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

Classes for dashed borders

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

Radius

<span class="border rounded-0"></span>
<span class="border rounded-1"></span>
<span class="border rounded-3"></span>
<span class="border rounded-capsule py-4 px-6"></span>
<span class="border rounded-circle"></span>