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

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
  • start - for classes that set style for border-left
  • end - 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 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.

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

Thank you for creating with Falcon |
2023 © Themewagon



Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.