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 BootstrapBorder
<p>The classes are named using the format <code>border-{side}</code> for <code>xs</code> and <code>border-{breakpoint}-{side}</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-{breakpoint}-{side} for sm, md, lg, xl, and xxl.
Where side is one of:
top- for classes that set style forborder-topbottom- for classes that set style forborder-bottomleft- for classes that set style forborder-startright- for classes that set style forborder-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set the
borderstyle 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>