Borders
Additive
<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
<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>
Styles
<div class="border border-primary"></div> <div class="border border-secondary"></div> <div class="border border-success"></div> <div class="border border-warning"></div> <div class="border border-danger"></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> <div class="border border-beets"></div>
Border-width
<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
<div class="rounded"></div> <div class="rounded-top"></div> <div class="rounded-end"></div> <div class="rounded-bottom"></div> <div class="rounded-start"></div> <div class="rounded-circle"></div> <div class="rounded-pill" style="width: 100px;"></div> <div class="rounded-start-pill" style="width: 100px;"></div> <div class="rounded-end-pill" style="width: 100px;"></div>
Sizes
<div class="rounded-0"></div> <div class="rounded-1"></div> <div class="rounded-2"></div> <!-- Regular border-radius --> <div class="rounded-3"></div>