Borders

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

Borders on Bootstrap

Border

<p>The classes are named using the format <code>border-{side}</code> for <code>xs</code> and <code>border-{side}-{breakpoint}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>
<p>Where<em> side</em> is one of:</p>
<ul>
  <li><code>top</code> - for classes that set style for <code>border-top</code></li>
  <li><code>bottom</code> - for classes that set style for <code>border-bottom</code></li>
  <li><code>left</code> - for classes that set style for <code>border-start</code></li>
  <li><code>right</code> - for classes that set style for <code>border-right</code></li>
  <li><code>x</code> - for classes that set both<code>*-left</code> and <code>*-right</code></li>
  <li><code>y</code> - for classes that set both<code>*-top</code> and <code>*-bottom</code></li>
  <li>blank - for classes that set the<code>border</code> style on all 4 side of the element.</li>
</ul>
<p class="mb-0">Use border utilities to quickly style the<code>border </code> of an element. Great for images, buttons, or any other element.</p>

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
  • 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.

Additive

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

Subtractive

<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>

Border Color

Change the border color using utilities built on our theme colors.

<span class="border border-info"></span>
<span class="border border-success"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-cake"></span>
<span class="border border-facebook"></span>
<span class="border border-twitter"></span>
<span class="border border-google-plus"></span>
<span class="border border-github"></span>
<div class="w-100"></div>
<span class="border border-black"></span>
<span class="border border-dark"></span>
<span class="border border-1100"></span>
<span class="border border-1000"></span>
<span class="border border-900"></span>
<span class="border border-800"></span>
<span class="border border-700"></span>
<span class="border border-600"></span>
<span class="border border-500"></span>
<span class="border border-400"></span>
<span class="border border-300"></span>
<span class="border border-200"></span>
<span class="border border-100"></span>
<span class="border border-light"></span>
<span class="border border-white"></span>
<span class="border border-2"></span>
<span class="border-top border-top-2"></span>
<span class="border-end border-end-2"></span>
<span class="border-bottom border-bottom-2"></span>
<span class="border-start border-start-2"></span>

Border Width

You can control border width using helper classes border-{1|2|3|4|5}. In addition, you can also use border-top-2, border-end-2, border-bottom-2, border-start-2

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
<hr />
<span class="border border-top-2"></span>
<span class="border border-end-2"></span>
<span class="border border-bottom-2"></span>
<span class="border border-start-2"></span>

Border Radius

Add classes to an element to easily round its corners.

<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:150px; height:75px;"></span>

Border Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API.

<span class="rounded-top"></span>
<span class="rounded-top-lg"></span>
<span class="rounded-end"></span>
<span class="rounded-end-lg"></span>
<span class="rounded-bottom"></span>
<span class="rounded-bottom-lg"></span>
<span class="rounded-start"></span>
<span class="rounded-start-lg"></span>
On this page
Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize