Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

3 files changed, 42 insertions, 9 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 %}
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index b2e70aaf5..015c9b943 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -1,9 +1,12 @@
 //
-// Border-width
+// Border
 //
 
-// TBD...?
-
+.border-0 { border: 0 !important; }
+.border-top-0 { border-top: 0 !important; }
+.border-right-0 { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0 { border-left: 0 !important; }
 
 //
 // Border-radius
@@ -28,3 +31,7 @@
 .rounded-circle {
   border-radius: 50%;
 }
+
+.rounded-0 {
+  border-radius: 0;
+}