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

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.

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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

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.

Purchase
customize