Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
Code Example
<div class="border"></div> <div class="border-top"></div> <div class="border-end"></div> <div class="border-bottom"></div> <div class="border-start"></div>
Subtractive
Code Example
<div class="border-0"></div> <div class="border-top-0"></div> <div class="border-end-0"></div> <div class="border-bottom-0"></div> <div class="border-start-0"></div>
Border color
Change the border color using utilities built on our theme colors.
Code Example
<div class="border border-primary"></div> <div class="border border-secondary"></div> <div class="border border-success"></div> <div class="border border-danger"></div> <div class="border border-warning"></div> <div class="border border-info"></div> <div class="border border-light"></div> <div class="border border-dark"></div> <div class="border border-white"></div>
Border-width
Code Example
<div class="border border-1"></div> <div class="border border-2"></div> <div class="border border-3"></div> <div class="border border-4"></div> <div class="border border-5"></div>
Border-radius
Add classes to an element to easily round its corners.
Code Example
<div class="rounded bg-primary"></div> <div class="rounded-top bg-primary"></div> <div class="rounded-end bg-primary"></div> <div class="rounded-bottom bg-primary"></div> <div class="rounded-start bg-primary"></div> <div class="rounded-circle bg-primary"></div> <div class="rounded-pill bg-primary"></div>
Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3.
Code Example
<div class="rounded-0 bg-primary"></div> <div class="rounded-1 bg-primary"></div> <div class="rounded-2 bg-primary"></div> <div class="rounded-3 bg-primary"></div>