Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
<!-- borders -->
<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
<!-- borders-->
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border
border-end-0></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>Color
<span class="border border-primary
border-box"></span>
<span class="border
border-primary-subtle"></span>
<span class="border
border-secondary"></span>
<span class="border
border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border
border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border
border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border
border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border
border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border
border-light-subtle"></span>
<span class="border border-dark
border-box"></span>
<span class="border
border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>Example
This is default success border
This is 75%
opacity success border
This is 50%
opacity success border
This is 25%
opacity success border
This is 10% opacity
success border
<!--opacity-->
<div class="border border-success p-2
mb-2">This is default
success border</div>
<div class="border border-success p-2
mb-2 border-opacity-75">This is 75%
opacity success border</div>
<div class="border border-success p-2
mb-2 border-opacity-50">This is 50%
opacity success border</div>
<div class="border border-success p-2
mb-2 border-opacity-25">This is 25%
opacity success border</div>
<div class="border border-success p-2
border-opacity-10">This is 10% opacity
success border</div>Width
<!--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>Radius
<!--radius-->
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-top avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-end avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-bottom avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-start avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-pill avatar
avatar-xxl"
alt="img">Size
<!--size-->
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-0 avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-1 avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-2 avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-3 avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-4 avatar
avatar-xxl"
alt="img">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-5 avatar
avatar-xxl"
alt="img">