Borders

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

For detail documentation. View Borders on Bootstrap

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"></span>
  <span class="border-top"></span>
  <span class="border-end"></span>
  <span class="border-bottom"></span>
  <span class="border-start"></span>
</div>

For removing border, the classes are named using the formatborder-{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-top-0"></span>
  <span class="border border-end-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border 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.

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-2x.

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 2x 
<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-2x">2x</span>
</div>
Border-radius
.rounded .rounded-top .rounded-end .rounded-bottom .rounded-start .rounded-circle .rounded-pill 
<div class="component-example">
  <span class="border rounded">.rounded</span>
  <span class="border rounded-top">.rounded-top</span>
  <span class="border rounded-end">.rounded-end</span>
  <span class="border rounded-bottom">.rounded-bottom</span>
  <span class="border rounded-start">.rounded-start</span>
  <span class="border rounded-circle">.rounded-circle</span>
  <span class="border rounded-pill" style="width:150px; height:75px;">.rounded-pill</span>
</div>