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

Change the border color using utilities built on our theme colors. The most used border colors utility class of this themes are `.border` and `.border-translucent`.

    <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-gray-1100"></span>
    <span class="border border-gray-1000"></span>
    <span class="border border-gray-900"></span>
    <span class="border border-gray-800"></span>
    <span class="border border-gray-700"></span>
    <span class="border border-gray-600"></span>
    <span class="border border-gray-500"></span>
    <span class="border border-gray-400"></span>
    <span class="border"></span>
    <span class="border border-translucent"></span>
    <span class="border border-gray-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-4"></span>
    <span class="rounded-5"></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

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize