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>