diff --git a/scss/_nav.scss b/scss/_nav.scss
index 14e76c9acc48..fc82161e3413 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -41,7 +41,7 @@
     @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus {
-      border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
+      border-color: $nav-tabs-link-hover-border-color;
     }
 
     &.disabled {
@@ -55,7 +55,7 @@
   .nav-item.show .nav-link {
     color: $nav-tabs-link-active-color;
     background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
   }
 
   .dropdown-menu {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c12001a27d16..99a5179a8119 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -570,10 +570,10 @@ $nav-link-disabled-color:           $gray-600 !default;
 $nav-tabs-border-color:             $gray-300 !default;
 $nav-tabs-border-width:             $border-width !default;
 $nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        $gray-700 !default;
 $nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 
 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;