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

<img src="..." alt="..." class="rounded">
																<img src="..." alt="..." class="rounded-top">
																<img src="..." alt="..." class="rounded-end">
																<img src="..." alt="..." class="rounded-bottom">
																<img src="..." alt="..." class="rounded-start">
																<img src="..." alt="..." class="rounded-circle">
																<img src="..." alt="..." class="rounded-pill">
																<img src="..." alt="..." class="rounded-0">

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. 

<img src="../assets/images/placeholder-img.jpg" class="rounded-0" alt="">
																<img src="../assets/images/placeholder-img.jpg" class="rounded-1" alt="">
																<img src="../assets/images/placeholder-img.jpg" class="rounded-2" alt="">
																<img src="../assets/images/placeholder-img.jpg" class="rounded-3" alt="">