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
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-bottomstart- for classes that set style forborder-leftend- 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 Radius
Add helper classes to an element to easily round its corners. For the rounded border, the class are named using the format rounded-*
<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
You can control top, right, bottom, left border radius of different size, using the helper classes. The classes also support responsive behaviors like rounded-{xxl | xl | lg | md | sm}-* . Examples are given below
<span class="rounded-top"></span>
<span class="rounded-top-3"></span>
<span class="rounded-top-4"></span>
<span class="rounded-end"></span>
<span class="rounded-end-3"></span>
<span class="rounded-end-4"></span>
<span class="rounded-bottom"></span>
<span class="rounded-bottom-3"></span>
<span class="rounded-bottom-4"></span>
<span class="rounded-start"></span>
<span class="rounded-start-3"></span>
<span class="rounded-start-4"></span>Border Style
For the different border style, add border-{dashed/dotted/hidden/none} classes with border class
<span class="border border-dashed"></span>
<span class="border-top border-dashed"></span>
<span class="border-right border-dashed"></span>
<span class="border-bottom border-dashed"></span>
<span class="border-dashed border-left"></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 Color
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}.
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
Border subtle colors also available in Falcon which are generated from theme colors. Format of this colors is .border-{color}-subtle.
Border Colors
Border Subtle Colors
<h5>Border Colors</h5><span class="border border-primary"></span>
<span class="border border-secondary"></span>
<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-light"></span>
<span class="border border-dark"></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-white"></span>
<h5 class="mt-3">Border Subtle Colors</h5><span class="border border-primary-subtle"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-info-subtle"></span>
<span class="border border-success-subtle"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark-subtle"></span>
