Alles anzeigen4:30 Uhr, wach, Gedanken kreisen, kann nicht mehr einschlafen!
ABER ich habe ja diese Ablenkung. Danke.
Der neue Code ist wirklich fein und ich habe ihn meinen Vorstellungen angepasst.
Auch habe ich Neues entdeckt, eine Funktion, die ich nie nutzte!
" Multiselekt" !
Für was braucht man sowas? Egal!
Leider ist da aber der Wurm drin.
Denn wenn mehrere Tabs ausgewählt wurden und man dann auf einen Tab,
aber eben nicht der aktive Tab, klickt, fehlt da eine Vektorgrafik.
Und hier mal meine Version.
CSS........
Wenn ich deinen Code bei mir benutze, nur die Dateipfade geändert, und im Kompaktmodus, sieht das hier so aus:
Irgendwas scheinst du an anderer Stelle zu benutzen das querschlägt; es passt nicht, deine Farben habe ich teils auch nicht, aber multiselect funktioniert scheinbar, ist auch so eingebaut in meinem Code.
Wäre auch gut jeweils einen Screenshot zu sehen, Bild/ 1000 Worte etc.. 
Was ich nicht machen kann oder werde, ist deine Version von meinem Code anzupassen, schon gar nicht deine anderen CSS Codes die ich nicht kenne; du müsstest schon einigermassen dem was ich gebastelt habe folgen.
Aber - gute und schlechte Nachricht - teils schlechte vielleicht für dich, der Code ist komplett umgeschrieben, aber strukturell der gleiche.
Gute Nachricht: der Code ist deutlich gerafft und viel übersichtlicher, und etwas besser kommentiert.
Ein paar Bugs bin ich auch losgeworden; die Farben sind etwas umfangreicher - vor allem für Multiselect. 
Separat anpassbare Outlines für selektiert/unselektiert sind auch drin, und die hover Outline für den Plus Button.
Ich benutze Multiselect auch selten, genauso wie angepinnte Tabs, aber man muss es berücksichten bei so einem Ding, wie auch das Overflow Gedöns (das noch etwas hakt...).
Farben würde ich nur oben im Block mit den ganzen :root Einstellungen ändern, und nix dazu unten reinschreiben.
Dafür hat man Variablen - nur die Quelle ändern, nie die Anwendung.
Wenn da oben zB steht --ug-color1: hsla(270, 60%, 70%, 1);, dann mach daraus --ug-color1: var(--uc-color-orange-normal); oder so, um eine deiner anderen Farbe zu übernehmen, damit auch überall wo die Variable --ug-color1 benutzt wird das durchgehend angepasst wird.
Zusätzliche Verläufe/ Schatten etc. kann man dann teils weiter unten einpflegen, aber das ist ein Thema für sich; kann ich gerne dabei helfen, aber das solltest du möglichst genau beschreiben und bebildern.
Falls du einen Verlauf nach innen generell und in den Svgs möchtest, wie du mal erwähnt hattest und ich fast befürchte, gäb's hier 2 Links Links ; viel Spass .
Mein Bedarf an svg basteln ist mit der Eckengrafik schon bedient worden. 
Geht auch anders mit Masken, Clipping etc., ein grobes Beispiel war in einem früheren Code schon drin, ist aber nichts für schwache Nerven.
Hier denn nun der neue Code; bitte wie immer komplett übernehmen, Dateipfade bitte wieder anpassen und deine eigenen Zusätze ganz unten nach Bedarf hinzufügen; die Grafik ist die gleiche wie zuvor.
(Code erneuert)
/*** Curved tabs test 5/11/2023***/
/*** Allgemeine Anpassungen ***/
:root {
/* Tabs bar height adjust */
/*--tab-block-margin: 4px !important;*/
--tab-block-margin: 2px !important;
--tab-min-height: 36px !important;
/* Ecken ohne Svg / Radius */
--ug-radius: 20px;
/* Rand Farben: Borders / Svg Outlines */
/* Rand not selected */
--ug-color-border: hsla(0, 0%, 83%, 0.5); /* unselected Kante Tab */
--ug-stroke: var(--ug-color-border); /* unselected Kante Svg */
/*--ug-stroke: hsla(0, 0%, 83%, 0.5);*/ /* unselected Kante Svg different, optional */
--ug-kante_hova: hsla(0, 0%, 93%, 0.65); /* unselected alle Kanten hover */
/* Rand selected , multiselected */
--ug-color-border_select: hsla(0, 0%, 93%, 0.75); /* selected Kante Tab */
--ug-stroke_select: var(--ug-color-border_select); /* selected Kante Svg */
/*--ug-stroke_select: hsla(0, 0%, 93%, 0.75);*/ /* selected Kante Svg different, optional */
--ug-kante_hova_select: hsla(0, 0%, 100%, 0.8); /* multiselected alle Kanten hover */
/* Farben Tabs Hintergrund: */
--ug-color1: hsla(0, 0%, 83%, 0.25); /* basis, unselected */
--ug-color2: hsla(35, 80%, 60%, 0.25); /* selected */
--ug-color2-multi: hsla(35, 80%, 40%, 0.25); /* multiselected */
--ug-color_multi_hova: hsla(35, 70%, 40%, 0.35); /* multiselected hover */
--ug-color_hova: hsla(0, 0%, 50%, 0.25); /* unselected hover */
/* Tab Leiste Kante unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
/*--tabs-navbar-shadow-size: 0 !important;*/
}
#TabsToolbar {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}
/** Distance between tabs **/
.tabbrowser-tab:not([pinned]) {
padding-inline: 2px !important;
overflow: visible !important;
}
/*** Allgemeine Anpassungen Ende ***/
/* Tab Leiste Kante unten */
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 2px, transparent 2px) !important;
}
/* buttons adjust size, position */
/* Buttons smaller by 2px */
#TabsToolbar {
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}
/* Move buttons up/down, optional, OFF */
/*
#TabsToolbar toolbarbutton {
margin-top: -1px !important;
}
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
*/
/* adjust tab content */
.tab-content {
margin-top: 2px !important;
padding-inline: 12px 11px !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
.tab-close-button {
border-radius: 50% !important;
}
.tab-close-button:hover {
/*outline: none !important;*/
outline: 1px solid var(--button-active-bgcolor) !important;
outline-offset: -1px !important;
background-color: var(--button-hover-bgcolor) !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css */
:root:not([customizing]) .tabbrowser-tab:not([pinned]):last-of-type {
/*margin-inline-end: 18px !important;
margin-inline-end: 14px !important;*/
margin-right: 11px !important;
}
/* Space for left corner first tab */
.tabbrowser-tab:not([pinned]):first-of-type {
margin-left: 9px !important;
}
/* New Tab (+) button, not overflow (+) button */
/* Button rund, Icon Position Höhe angepasst */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
border-radius: 50% !important;
padding-block: 7px 9px !important;
}
/* minimaler Abstand zu Tabs, weniger = Bug! */
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
padding-left: 0px !important;
}
/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
/*outline: 1px solid var(--ug-color-border) !important;
outline-offset: -1px !important;*/
box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
}
/* weniger Abstand zu Tabs --> Bug!!! OFF!!! */
/*
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
margin-left: -8px !important;
}
*/
/*** Tabs base ***/
/* tabs connected bottom */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
/*** Tabs Radien, borders, Ecken, Abfolge diverser Tabformen , seitl. borders nur wo keine unteren Ecken ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected seitliche border weg */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* Tab nach selected tab komplett rund, ohne Ecken */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
border-radius: var(--ug-radius) !important;
border-left: 1px solid var(--ug-color-border) !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/* letzte tab Ecken beidseitig, ausser kommt nach selected tab */
.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
border-right: none !important;
}
/*** COLORS ***/
/* Basis */
.tabbrowser-tab .tab-background {
outline: none !important;
box-shadow: none !important;
background-color: var(--ug-color1) !important;
border-color: var(--ug-color-border) !important;
stroke: var(--ug-stroke) !important;
fill: var(--ug-color1) !important;
}
/* Colors, outlines: selected / multiselected / hover */
/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
stroke: var(--ug-stroke_select) !important;
border-color: var(--ug-color-border_select) !important;
fill: var(--ug-color2) !important;
}
/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
background-color: var(--ug-color2-multi) !important;
fill: var(--ug-color2-multi) !important;
}
/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
background-color: var(--ug-color_multi_hova) !important;
fill: var(--ug-color_multi_hova) !important;
stroke: var(--ug-kante_hova_select) !important;
border-color: var(--ug-kante_hova_select) !important;
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
fill: var(--ug-color_hova) !important;
/*stroke: var(--ug-stroke_select) !important;*/
stroke: var(--ug-kante_hova) !important;
border-color: var(--ug-kante_hova) !important;
}
/*** tabs corners aussen ***/
/* base */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
content: "";
position: absolute;
--ug-corner-size: var(--tab-min-height);
width: var(--ug-corner-size) !important;
height: var(--ug-corner-size) !important;
background-size: var(--ug-corner-size) !important;
background-repeat: no-repeat !important;
background-position: bottom center !important;
mask-image: linear-gradient(215deg, transparent, black 18px) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/tab_corner_doppel_Test-1W2.svg) !important;
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/tab_corner_doppel_Test-1W2.svg) !important;
transform: scaleX(-1) !important;
}
