From bca99232b8bef6a53719e4827de40729098d4ec8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 5 May 2022 21:32:02 -0700
Subject: Iterate on border utilities (#36239)

* Remove `--bs-border-opacity: 1` from `.border-*` utilities

We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.

* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues

* Add some demos of border utils to the docs
---
 site/content/docs/5.1/utilities/borders.md | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

(limited to 'site/content/docs')

diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index bba34358e..1df69f372 100644
--- a/site/content/docs/5.1/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -12,6 +12,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord
 
 ### Additive
 
+Add borders to custom elements:
+
 {{< example class="bd-example-border-utils" >}}
 <span class="border"></span>
 <span class="border-top"></span>
@@ -22,6 +24,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord
 
 ### Subtractive
 
+Or remove borders:
+
 {{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
 <span class="border-0"></span>
 <span class="border-top-0"></span>
@@ -43,11 +47,22 @@ Change the border color using utilities built on our theme colors.
 <span class="border border-white"></span>
 {{< /example >}}
 
-{{< callout >}}
-Unlike text and background color utilities, border color utilities redeclare the `border-color` property **without** an additional `--bs-border-opacity`, as opposed to resetting only `--bs-border-color`. This ensures the backward compatibility of border color utilities applying to other components while providing additional functionality through CSS variables.
+Or modify the default `border-color` of a component:
 
-This will be revisited in a future major release.
-{{< /callout >}}
+{{< example >}}
+<div class="mb-4">
+  <label for="exampleFormControlInput1" class="form-label">Email address</label>
+  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
+</div>
+
+<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
+  Dangerous heading
+</div>
+
+<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
+  Changing border color and width
+</div>
+{{< /example >}}
 
 ## Opacity
 
-- 
cgit v1.2.3