Bootstrap Borders

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

Torus Kit new features for Borders
Custom color Thickness

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-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Subtractive

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Border color

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

Default colors

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
<span class="border border-grey"></span>
Pro

Custom color

In some cases, when you need a different color that is not available in Bootstrap colors use data-border-color="{color h:color}" attribute. It accepts any CSS format color. The second argument h:color represents border color in :hover state.

<!-- Red border -->
<span class="border[red]"></span>

<!-- Black border and red on hover -->
<span class="border[black]" data-fx="h:border[red]"></span>
Free

Thickness

Add thickness to the element with a border by adding a border-{md|lg} class with 2px and 3px border-width. Add more into $border-thickness in _variables.scss.

<!-- Default thick -->
<span class="border border-primary"></span>

<!-- MD thick -->
<span class="border border-primary border-md"></span>

<!-- LG thick -->
<span class="border border-primary border-lg"></span>

Border-radius

Add classes to an element to easily round its corners.

64x64 64x64 64x64 64x64 64x64 64x64 96x64 64x64
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">

Sizes

Use .rounded-lg, .rounded-sm, .rounded-xl for larger or smaller border-radius.

64x64 64x64 64x64 64x64
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-lg">
<img src="..." alt="..." class="rounded-xl">