diff --git a/apps/desktop/src/renderer/src/components/tab-bar.tsx b/apps/desktop/src/renderer/src/components/tab-bar.tsx
index a5d66211a..15797258c 100644
--- a/apps/desktop/src/renderer/src/components/tab-bar.tsx
+++ b/apps/desktop/src/renderer/src/components/tab-bar.tsx
@@ -185,7 +185,10 @@ function SortableTabItem({
   canCloseOthers: boolean;
   isNew: boolean;
   shouldReduceMotion: boolean;
-  /** Hairline on the tab's left edge — hidden next to the active tab. */
+  /**
+   * Hairline on the tab's left edge — hidden next to the active tab, and
+   * faded out while either of the two tabs it divides is hovered.
+   */
   showSeparator: boolean;
 }) {
   const setActiveTab = useTabStore((s) => s.setActiveTab);
@@ -356,9 +359,12 @@ function SortableTabItem({
           />
         )}
         {showSeparator && (
+          // Fades in step with the neighbouring hover pill: both use a bare
+          // transition-opacity, so the hairline clears exactly as the pill
+          // arrives rather than lingering 2px off its rounded edge.
           <span
             aria-hidden
-            className="pointer-events-none absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-border"
+            className="pointer-events-none absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-surface-border transition-opacity group-hover/tab:opacity-0 prev-tab-hover:opacity-0"
           />
         )}
         <ContextMenu>
@@ -650,7 +656,7 @@ export function TabBar() {
                       unpinnedCount > 0 && (
                         <div
                           aria-hidden
-                          className="mx-1 mb-2.5 h-4 w-px shrink-0 self-end bg-border"
+                          className="mx-1 mb-2.5 h-4 w-px shrink-0 self-end bg-surface-border"
                         />
                       )}
                   </Fragment>
diff --git a/apps/desktop/src/renderer/src/globals.css b/apps/desktop/src/renderer/src/globals.css
index 6496a738d..e67b99085 100644
--- a/apps/desktop/src/renderer/src/globals.css
+++ b/apps/desktop/src/renderer/src/globals.css
@@ -6,6 +6,20 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Tab strip hairlines sit on each tab's own left edge, so the hairline between
+   two tabs belongs to the tab on the right. Hovering the left tab has to fade
+   it out as well, which no ancestor-based variant can reach — hence the
+   adjacent-sibling selector. The (hover: hover) gate mirrors what Tailwind
+   already wraps group-hover in, so both halves of the fade stay in step on
+   devices without a pointer. */
+@custom-variant prev-tab-hover {
+  @media (hover: hover) {
+    [data-tab-frame]:hover + [data-tab-frame] & {
+      @slot;
+    }
+  }
+}
+
 /* Font stack: Inter for Latin UI text + system CJK fonts for localized content.
    Web app uses the same stack via next/font/google in apps/web/app/layout.tsx —
    keep the CJK fallback tail in sync across both files. The Inter primary family