fix: fix borders bugs on chrome without breaking in firefox

scss/utilities/rounded-corners-mixin.scss

@@ -11,13 +11,28 @@
   border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
 }
 
+@mixin border-image-chrome() {
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
+    border-image-repeat: space;
+  }
+}
+
+@mixin border-image-ff() {
+  @-moz-document url-prefix() {
+    border-image-repeat: stretch;
+  }
+}
+
 @mixin rounded-corners($isDark: false) {
   @extend %rounded-corner-defaults;
 
   border-image-slice: 3;
   border-image-width: 3;
   border-image-repeat: stretch;
 
+  @include border-image-chrome();
+  @include border-image-ff();
+
   @if $isDark {
     @include border-image($color-white);
 
@@ -36,6 +51,9 @@
   border-image-width: 2;
   border-image-repeat: stretch;
 
+  @include border-image-chrome();
+  @include border-image-ff();
+
   @if $isDark {
     @include compact-border-image($color-white);