improve additive/subtractive border util docs

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 7c2d2618b6dc940f604e8e67e558c085381c7c23..6c5c7c5d96d84f59190996d8203217a1989261a1 100644 (file)
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -357,7 +357,12 @@
     height: 5rem;
     margin: .25rem;
     background-color: #f5f5f5;
-    border: 1px solid;
+  }
+}
+
+.bd-example-border-utils-0 {
+  [class^="border"] {
+    border: 1px solid $border-color;
   }
 }
 

diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md
index 2304efcd409345e5d83039f8c2696f55d0045654..ac865e5d926fa05e615b44911a0eda2c564603d9 100644 (file)
--- a/docs/4.0/utilities/borders.md
+++ b/docs/4.0/utilities/borders.md
@@ -9,7 +9,9 @@ toc: true
 
 ## Border
 
-Add classes to an element to add or remove all borders or some borders.
+Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
+
+### Additive
 
 <div class="bd-example-border-utils">
 {% example html %}
@@ -18,6 +20,13 @@ Add classes to an element to add or remove all borders or some borders.
 <span class="border-right"></span>
 <span class="border-bottom"></span>
 <span class="border-left"></span>
+{% endexample %}
+</div>
+
+### Subtractive
+
+<div class="bd-example-border-utils bd-example-border-utils-0">
+{% example html %}
 <span class="border-0"></span>
 <span class="border-top-0"></span>
 <span class="border-right-0"></span>