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 //