add border color utilities

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index f85daf7596f1548cd0a3d84ab347c7a285d2f8b2..7bd495fc2a8dba82b345405259679d877700042b 100644 (file)
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -363,10 +363,10 @@
 }
 
 .bd-example-border-utils {
-  [class^="border-"] {
+  [class^="border"] {
     display: inline-block;
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
     margin: .25rem;
     background-color: #f5f5f5;
     border: 1px solid;

diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md
index 8bf3f467403b2c6680cdd5aeea3067fc9b16c7ac..3b1ee4338bffe0ceaa983ade776a8015bcde4981 100644 (file)
--- a/docs/4.0/utilities/borders.md
+++ b/docs/4.0/utilities/borders.md
@@ -13,6 +13,7 @@ Add classes to an element to remove all borders or some borders.
 
 <div class="bd-example-border-utils">
 {% example html %}
+<span class="border"></span>
 <span class="border-0"></span>
 <span class="border-top-0"></span>
 <span class="border-right-0"></span>
@@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders.
 {% endexample %}
 </div>
 
+## Border color
+
+Change the border color using utilities built on our theme colors.
+
+<div class="bd-example-border-utils">
+{% example html %}
+{% for color in site.data.theme-colors %}
+<span class="border border-{{ color.name }}"></span>{% endfor %}
+{% endexample %}
+</div>
+
 ## Border-radius
 
 Add classes to an element to easily round its corners.

diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index 4cb0a6c3be475ecc3d9773ac21cf01b2c6c1c492..05480582c4453a65ac3efdf5d7656b4ba3d3b14a 100644 (file)
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -2,12 +2,19 @@
 // Border
 //
 
+.border          { border: 1px solid $gray-200 !important; }
 .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; }
 
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
 //
 // Border-radius
 //