2 files changed, 32 insertions, 6 deletions
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 549ec0340..dea8eb5f3 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -318,6 +318,16 @@
   }
 }
 
+.bd-example-border-utils {
+  [class^="border-"] {
+    display: inline-block;
+    width: 6rem;
+    height: 6rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+    border: 1px solid;
+  }
+}
 
 //
 // Code snippets
diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md
index b47d95c97..1eb716c1f 100644
--- a/docs/utilities/borders.md
+++ b/docs/utilities/borders.md
@@ -6,17 +6,32 @@ group: utilities
 
 Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.
 
+## Border
+
+Add classes to an element to remove all borders or some borders.
+
+<div class="bd-example-border-utils">
+{% example html %}
+<span class="border-0"></span>
+<span class="border-top-0"></span>
+<span class="border-right-0"></span>
+<span class="border-bottom-0"></span>
+<span class="border-left-0"></span>
+{% endexample %}
+</div>
+
 ## Border-radius
 
 Add classes to an element to easily round its corners.
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/100x100" class="rounded" alt="Example rounded image">
-  <img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image">
-  <img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image">
-  <img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image">
-  <img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image">
-  <img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image">
+  <img data-src="holder.js/75x75" class="rounded" alt="Example rounded image">
+  <img data-src="holder.js/75x75" class="rounded-top" alt="Example top rounded image">
+  <img data-src="holder.js/75x75" class="rounded-right" alt="Example right rounded image">
+  <img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
+  <img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
+  <img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
+  <img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
 </div>
 
 {% highlight html %}
@@ -26,4 +41,5 @@ Add classes to an element to easily round its corners.
 <img src="..." alt="..." class="rounded-bottom">
 <img src="..." alt="..." class="rounded-left">
 <img src="..." alt="..." class="rounded-circle">
+<img src="..." alt="..." class="rounded-0">
 {% endhighlight %}