Borders

These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View borders on Bootstrap

Border

The classes are named using the format border-{side} for xs and border-{breakpoint}-{side} 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
  • left - for classes that set style for border-start
  • right - for classes that set style for border-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.

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

Examples for additive borders

<div class="component-example"><span class="border border-dark"></span>
  <span class="border-dark border-top"></span>
  <span class="border-dark border-end"></span>
  <span class="border-dark border-bottom"></span>
  <span class="border-dark border-start"></span>
</div>

For removing border, the classes are named using the format border-{side}-0 forxs andborder-{breakpoint}-{side}-0 for sm, md, lg and xl.

Where side is same as documented before.

Examples for subtractive borders

<div class="component-example">
  <span class="border border-0"></span>
  <span class="border border-dark border-top-0"></span>
  <span class="border border-dark border-end-0"></span>
  <span class="border border-dark border-bottom-0"></span>
  <span class="border border-dark border-lg-start-0"></span>
</div>

Border style

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

Where side is same as documented before.

Examples for dashed borders

<div class="component-example"><span class="border-dashed"></span>
  <span class="border-dashed-top"></span>
  <span class="border-sm-dashed-end"></span>
  <span class="border-dashed-bottom"></span>
  <span class="border-dashed-start"></span>
</div>

Border color set as currentColor and border width 1px. Modifier can be used to change border color and width. The modifier classes for color are named using the format border-{color} and for width border-2.

Where color is one of: primary, secondary, success, info, warning, danger, light, dark, black, 1100, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, white,

Examples
primary secondary success info warning danger light dark black 1100 1000 900 800 700 600 500 400 300 200 100 white 2
<div class="component-example">
  <span class="border border-primary text-primary">primary</span>
  <span class="border border-secondary text-secondary">secondary</span>
  <span class="border border-success text-success">success</span>
  <span class="border border-info text-info">info</span>
  <span class="border border-warning text-warning">warning</span>
  <span class="border border-danger text-danger">danger</span>
  <span class="border border-light text-light">light</span>
  <span class="border border-dark text-dark">dark</span>
  <span class="border border-black text-black">black</span>
  <span class="border border-1100 text-1100">1100</span>
  <span class="border border-1000 text-1000">1000</span>
  <span class="border border-900 text-900">900</span>
  <span class="border border-800 text-800">800</span>
  <span class="border border-700 text-700">700</span>
  <span class="border border-600 text-600">600</span>
  <span class="border border-500 text-500">500</span>
  <span class="border border-400 text-400">400</span>
  <span class="border border-300 text-300">300</span>
  <span class="border border-200 text-200">200</span>
  <span class="border border-100 text-100">100</span>
  <span class="border border-white text-white">white</span>
  <span class="border border-2">2</span>
</div>

Border-radius

Add classes to an element to easily round its corners.

<div class="component-example">
  <span class="border border-dark rounded-3"></span>
  <span class="border border-dark rounded-3 rounded-top"> </span>
  <span class="border border-dark rounded-3 rounded-end"> </span>
  <span class="border border-dark rounded-3 rounded-bottom"></span>
  <span class="border border-dark rounded-3 rounded-start"></span>
  <span class="border border-dark rounded-circle"></span>
  <span class="border border-dark rounded-pill" style="width:150px; height:75px;"></span>
</div>