diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
index cc40cc7..6594d8a 100644
--- a/chrome/toolbar/tabbar.css
+++ b/chrome/toolbar/tabbar.css
@@ -294,26 +294,44 @@ toolbarbutton[part="scrollbutton-down"] {
   max-width: 240px !important;
 }
 
-/* tab separators */
-.tabbrowser-tab:not([last-visible-tab="true"]) {
-  margin-inline-end: 3px !important;
+/* Tab separators */
+.tabbrowser-tab .tab-stack {
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    height: 20px;
+    inset: 0 auto;
+    margin-block: auto;
+    border-left: 1px solid transparent;
+  }
+  
+  &::before {
+    left: 0;
+  }
+  
+  &::after {
+    right: 0;
+  }
 }
 
-.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
-  content: "";
-  position: absolute;
-  display: block;
-  height: 20px;
-  right: -1px;
-  top: 6px;
-  border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
+/* Set separator color */
+.tabbrowser-tab:not([selected], [multiselected], :hover) {
+  & .tab-stack::before,
+  &:last-of-type .tab-stack::after {
+    border-color: color-mix(in srgb, currentColor 34%, transparent);
+  }
 }
 
-/* need layout.css.has-selector.enabled */
-.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after {
-  display: none;
+/* Hide separator when previous sibling is hovered or selected */
+.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before {
+  border-color: transparent !important;
 }
 
+/* .tabbrowser-tab:not([last-visible-tab="true"]) {
+  margin-inline-end: -1px !important;
+} */
+
 #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
   margin-inline-start: 0 !important;
 }