Border Style
Use border utilities to quickly style the border and border-radius of an element.
|
Class
|
Properties
|
|---|---|
| border-solid | |
| border-dashed | |
| border-dotted | |
| border-double | |
| border-groove | |
| border-none |
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:
.border-solid
.border-dashed
.border-dotted
.border-double
.border-groove
.border-none
<div class="border border-solid"></div>
<div class="border border-dashed"></div>
<div class="border border-dotted"></div>
<div class="border border-double"></div>
<div class="border border-groove"></div>
<div class="border-none"></div>
Responsive
Responsive variations also exist for each border style value. Use the .border-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing border style utility.
<div class="border border-3 border-solid border-md-dashed ..."></div>