Contents
Change the border color using utilities built on our theme colors and color system.
Quick reference
| Class | Color |
|---|---|
border-white | |
border-black | |
border-primary | |
border-primary-subtle | |
border-discovery | |
border-discovery-subtle | |
border-secondary | |
border-secondary-subtle | |
border-success | |
border-success-subtle | |
border-danger | |
border-danger-subtle | |
border-warning | |
border-warning-subtle | |
border-info | |
border-info-subtle | |
border-light | |
border-light-subtle | |
border-dark | |
border-dark-subtle |
Basic usage
Setting the border color
Control the border color of an element using the border-{color} utilities.
<div class="border border-primary ..."></div>
<div class="border border-secondary ..."></div>
<div class="border border-secondary-subtle ..."></div>
<div class="border border-primary-subtle ..."></div>
Changing the border color
Use the border-{color} to modify the default border-color of a component.
This field is required.
<input class="form-control border-danger ..." />
Changing the opacity
Control the opacity of an element’s border color using the color opacity .bg-opacity-* utilities.
border-opacity-100
border-opacity-75
border-opacity-50
border-opacity-25
<div class="border-opacity-100 border border-secondary..."></div>
<div class="border-opacity-75 border border-secondary..."></div>
<div class="border-opacity-50 border border-secondary..."></div>
<div class="border-opacity-25 border border-secondary..."></div>
Edit this page on Github
Last updated on April 6, 2024