Use a box-shadow on .nav-tabs to prevent subpixel rendering issues (#42126)

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 20a53c216e3aba50b83e17012911a22a0ac070eb..38182f93e9f68d262e4b7e77fbc545124f4dacaf 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -151,11 +151,11 @@ $nav-underline-tokens: defaults(
     @include tokens($nav-tabs-tokens);
     // scss-docs-end nav-tabs-css-vars
 
-    border-block-end: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
+    box-shadow: inset 0 calc(-1 * var(--nav-tabs-border-width)) 0 var(--nav-tabs-border-color);
 
     .nav-link {
-      margin-bottom: calc(-1 * var(--nav-tabs-border-width));
       border: var(--nav-tabs-border-width) solid transparent;
+      border-bottom-color: var(--nav-tabs-border-color);
       @include border-bottom-radius(0);
 
       &:hover {