Border Width
Use border utilities to quickly style the border and border-radius of an element.
|
Class
|
Properties
|
|---|---|
| border-0 | |
| border | |
| border-2 | |
| border-3 | |
| border-4 | |
| border-5 | |
| border-6 | |
| border-7 | |
| border-8 | |
| border-top-0 | |
| border-top | |
| border-top-2 | |
| border-top-3 | |
| border-top-4 | |
| border-top-5 | |
| border-top-6 | |
| border-top-7 | |
| border-top-8 | |
| border-end-0 | |
| border-end | |
| border-end-2 | |
| border-end-3 | |
| border-end-4 | |
| border-end-5 | |
| border-end-6 | |
| border-end-7 | |
| border-end-8 | |
| border-bottom-0 | |
| border-bottom | |
| border-bottom-2 | |
| border-bottom-3 | |
| border-bottom-4 | |
| border-bottom-5 | |
| border-bottom-6 | |
| border-bottom-7 | |
| border-bottom-8 | |
| border-start-0 | |
| border-start | |
| border-start-2 | |
| border-start-3 | |
| border-start-4 | |
| border-start-5 | |
| border-start-6 | |
| border-start-7 | |
| border-start-8 |
All sides
Use border utilities to add or remove an element’s borders. Choose from .border, .border-0, .border-2, .border-4, and .border-8 to set the border on all sides:
<div class="border"></div>
<div class="border border-0"></div>
<div class="border border-2"></div>
<div class="border border-4"></div>
<div class="border border-8"></div>
Individual sides
Or, use the .border-SIDE, .border-SIDE-0, .border-SIDE-2, .border-SIDE-4, and .border-SIDE-8 to set the border on one side only:
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Responsive
Responsive variations also exist for each border value. Use the .border-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing border utility.
<!-- All sides -->
<div class="border-md-4 ..."></div>
<!-- Individual side -->
<div class="border-top border-md-2 ..."></div>