What this Bootstrap Utility API class does
Sets the CSS property "border-color" of an element. The CSS property "border-color" is used to set the color of an HTML element's border. It is one of several border-related properties that can be used to specify the style, width, and color of an element's borders.
The available border colors are taken from the Bootstrap SASS map $theme-colors.
Using the "border-color" property, a web developer can create visually appealing borders for their HTML elements, and separate them visually from other elements on the page. By using different colors for the different borders of an element, the developer can create complex and visually interesting designs.
Example usage & available classes
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Example override
In the example below, we are making the utility responsive, which means you can also use it per breakpoint: ".border-lg-danger".
"border-color": map-merge(
map-get($utilities, "border-color"),
(
responsive: true
)
)