Bootstrap Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

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

Border color

Change the border color using utilities built on our theme colors.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-info"></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-gray"></span>
<span class="border border-white"></span>

Extended border color

<span class="border border-blue"></span>
<span class="border border-indigo"></span>
<span class="border border-navy"></span>
<span class="border border-maroon"></span>
<span class="border border-brown"></span>
<span class="border border-purple"></span>
<span class="border border-pink"></span>
<span class="border border-magenta"></span>
<span class="border border-red"></span>
<span class="border border-orange"></span>
<span class="border border-yellow"></span>
<span class="border border-lime"></span>
<span class="border border-green"></span>
<span class="border border-teal"></span>
<span class="border border-cyan"></span>
<span class="border border-black"></span>
<span class="border border-gray"></span>

Active state

Change the border color on element’s active state. It means, when element gets hover state, when it gets .active or .show class, or when element becomes visible in the viewport and gets .inview class. This feature is part of the Torus Kit Effects & Interactions.

Border color

To change the border color use data-tor="<trigger>:border(<variant>)"

border(primary)
border(secondary)
border(success)
border(danger)
border(warning)
border(info)
border(light)
border(dark)
border(white)
border(transparent)
<div class="bg-transparent border" data-tor="hover:border(primary)">border(primary)</div>
<div class="bg-transparent border" data-tor="hover:border(secondary)">border(secondary)</div>
<div class="bg-transparent border" data-tor="hover:border(success)">border(success)</div>
<div class="bg-transparent border" data-tor="hover:border(danger)">border(danger)</div>
<div class="bg-transparent border" data-tor="hover:border(warning)">border(warning)</div>
<div class="bg-transparent border" data-tor="hover:border(info)">border(info)</div>
<div class="bg-transparent border" data-tor="hover:border(light)">border(light)</div>
<div class="bg-transparent border" data-tor="hover:border(dark)">border(dark)</div>
<div class="bg-transparent border" data-tor="hover:border(white)">border(white)</div>
<div class="bg-transparent border" data-tor="hover:border(transparent)">border(transparent)</div>
border(primary)
border(secondary)
border(success)
border(danger)
border(warning)
border(info)
border(light)
border(dark)
border(white)
border(transparent)
<div class="bg-transparent border" data-tor="active:border(primary)">border(primary)</div>
<div class="bg-transparent border" data-tor="active:border(secondary)">border(secondary)</div>
<div class="bg-transparent border" data-tor="active:border(success)">border(success)</div>
<div class="bg-transparent border" data-tor="active:border(danger)">border(danger)</div>
<div class="bg-transparent border" data-tor="active:border(warning)">border(warning)</div>
<div class="bg-transparent border" data-tor="active:border(info)">border(info)</div>
<div class="bg-transparent border" data-tor="active:border(light)">border(light)</div>
<div class="bg-transparent border" data-tor="active:border(dark)">border(dark)</div>
<div class="bg-transparent border" data-tor="active:border(white)">border(white)</div>
<div class="bg-transparent border" data-tor="active:border(transparent)">border(transparent)</div>
border(primary)
border(secondary)
border(success)
border(danger)
border(warning)
border(info)
border(light)
border(dark)
border(white)
border(transparent)
<div class="bg-transparent border" data-tor="inview:border(primary)">border(primary)</div>
<div class="bg-transparent border" data-tor="inview:border(secondary)">border(secondary)</div>
<div class="bg-transparent border" data-tor="inview:border(success)">border(success)</div>
<div class="bg-transparent border" data-tor="inview:border(danger)">border(danger)</div>
<div class="bg-transparent border" data-tor="inview:border(warning)">border(warning)</div>
<div class="bg-transparent border" data-tor="inview:border(info)">border(info)</div>
<div class="bg-transparent border" data-tor="inview:border(light)">border(light)</div>
<div class="bg-transparent border" data-tor="inview:border(dark)">border(dark)</div>
<div class="bg-transparent border" data-tor="inview:border(white)">border(white)</div>
<div class="bg-transparent border" data-tor="inview:border(transparent)">border(transparent)</div>

Border-width

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

Border-radius

Add classes to an element to easily round its corners.

<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-end"></div>
<div class="rounded-bottom"></div>
<div class="rounded-start"></div>
<div class="rounded-circle"></div>
<div class="rounded-pill"></div>

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.

<div class="rounded-0"></div>
<div class="rounded-1"></div>
<div class="rounded-2"></div>
<div class="rounded-3"></div>

Extended sizes

<div class="rounded-xs"></div>
<div class="rounded-sm"></div>
<div class="rounded"></div>
<div class="rounded-lg"></div>
<div class="rounded-xl"></div>
<div class="rounded-xxl"></div>
<div class="rounded-pill px-6"></div>
<div class="rounded-circle"></div>