Border Color
Use border utilities to quickly style the border and border-radius of an element.
|
Class
|
Properties
|
|---|---|
| border-primary | |
| border-secondary | |
| border-tertiary | |
| border-warning | |
| border-success | |
| border-info | |
| border-danger | |
| border-transparent | |
| border-current | |
| border-base | |
| border-card | |
| border-black | |
| border-white |
Usage
Change the border color using utilities built on our theme colors.. Use the .border-{color} to set the border color on any element:
<div class="border border-primary"></div>
<div class="border border-tertiary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-success"></div>
<div class="border border-info"></div>
Responsive
Responsive variations also exist for each border color value. Use the .border-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing border color utility.
<div class="border-md-primary ..."></div>