diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index f85daf7596..7bd495fc2a 100644
--- 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 8bf3f46740..3b1ee4338b 100644
--- 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.
{% example html %}
+
@@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders.
{% endexample %}
+## Border color
+
+Change the border color using utilities built on our theme colors.
+
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+{% endfor %}
+{% endexample %}
+
+
## 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 4cb0a6c3be..05480582c4 100644
--- 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
//