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, and xl.

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-left
right - 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 the border style on all 4 side of the element.

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

Examples for adding borders

<div class="component-example">
  <span class="border"></span>
  <span class="border-top"></span>
  <span class="borderright"></span>
  <span class="border-bottom"></span>
  <span class="border-left"></span>
</div>

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

Where side is same as documented before.

Examples for removing borders

<div class="component-example">
  <span class="border border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-lg-left-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-right"></span>
  <span class="border-dashed-bottom"></span>
  <span class="border-dashed-left"></span>
</div>

Border color and width

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 rounded

.rounded-0 .rounded .rounded-soft .rounded-circle

<div class="component-example">
  <span class="border rounded-0">.rounded-0</span>
  <span class="border rounded">.rounded</span>
  <span class="border rounded-soft">.rounded-soft</span>
  <span class="border rounded-circle">.rounded-circle</span>
</div>