From dccd0037d82de02add2f28d9208dcb00687428a4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 1 Jan 2018 20:51:20 -0800
Subject: [PATCH] improve additive/subtractive border util docs

---
 assets/scss/_component-examples.scss |  7 ++++++-
 docs/4.0/utilities/borders.md        | 11 ++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 7c2d2618b6..6c5c7c5d96 100644
--- 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 2304efcd40..ac865e5d92 100644
--- 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>