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 BootstrapBorder
The classes are named using the format
border-{side} for xs and
border-{breakpoint}-{side} for sm, md,
lg, and xl.
Where side is one of:
-
top- for classes that set style forborder-top -
bottom- for classes that set style forborder-bottom -
left- for classes that set style forborder-left -
right- for classes that set style formargin-right -
x- for classes that set both*-leftand*-right -
y- for classes that set both*-topand*-bottom -
blank - for classes that set the
borderstyle 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="borderright"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>Subtractive
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-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-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>Border Radius
Add classes to an element to easily round its corners.
<span class="rounded-0"></span>
<span class="rounded"></span>
<span class="rounded-soft"></span>
<span class="rounded-circle"></span>Border Style
For the dashed border, the classes are named using the format,
border-dashed-{side} for xs and
border-{breakpoint}-dashed-{side} for sm,
md, lg, xl and xxl.
Where side is same as documented before.
<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-dashed-right"></span>
<span class="border-dashed-bottom"></span>
<span class="border-dashed-left"></span>Border color and width
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} and for width
border-2x.
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,
<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-stunning"></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-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-light"></span>
<span class="border border-white"></span>
<span class="border border-2x"></span>
