View on GitHub

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

<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-dark"></span>
<span class="border border-contrast-light"></span>
<span class="border border-contrast-medium"></span>
<span class="border border-contrast-dark"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

Border-radius

Add classes to an element to easily round its corners.

Example rounded image75x75 Example top rounded image75x75 Example right rounded image75x75 Example bottom rounded image75x75 Example left rounded image75x75 Completely round image75x75 Rounded pill image150x75 Example non-rounded image (overrides rounding applied elsewhere)75x75 
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

Border Radiuses Sizes

Size-infix
 Size
10.25rem
20.5rem
31rem
41.5rem
43rem
Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 
<img src="..." class="br-1" alt="...">
<img src="..." class="br-2" alt="...">
<img src="..." class="br-3" alt="...">
<img src="..." class="br-3" alt="...">
<img src="..." class="br-4" alt="...">
<img src="..." class="br-5" alt="...">

Override Sizes

//Customizing the Base
$radiusbasis: 1rem;


//Customizing Sizes

$borderradius: (
  0: 0,
  1: ($radiusbasis * .25),
  2: ($radiusbasis * .5),
  3: $radiusbasis,
  4: ($radiusbasis * 1.5),
  5: ($radiusbasis * 3)
);

Explicit Border-Radiuses for Single Cordners

Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 
<img src="..." class="brt-3" alt="...">
<img src="..." class="brb-3" alt="...">
<img src="..." class="brl-3" alt="...">
<img src="..." class="brr-3" alt="...">
<img src="..." class="brtl-3" alt="...">
<img src="..." class="brtr-3" alt="...">
<img src="..." class="brbl-3" alt="...">
<img src="..." class="brbr-3" alt="...">

Explicit Corners for Breakpoints

Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 Example rounded image75x75 
<img src="..." class="brt-sm-3" alt="...">
<img src="..." class="brb-md-3" alt="...">
<img src="..." class="brl-lg-3" alt="...">
<img src="..." class="brr-xl-3" alt="...">
<img src="..." class="brtl-xxl-3" alt="...">
<img src="..." class="brtr-0 brtr-xl-4" alt="...">

Sizes

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

Example small rounded image75x75 Example large rounded image75x75 
<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">