/* Remove floating tabs */
:root {
    --proton-tab-block-margin: 0px !important;
    --tab-block-margin: 0px !important;
    --tabs-shadow-size: 1px !important;
}
#navigator-toolbox {
    --tabs-border-color: color-mix(in srgb, transparent, transparent) !important;
}
/* Tab Shaping */
.tabbrowser-tab {
    padding-inline: 0 !important;
}
:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned] {
    min-height: calc(var(--tab-min-height) + 2px) !important;
}
.tab-content[pinned] {
    padding-inline: 11px !important;
}
.tab-background {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-inline: 0 !important;
}
.tabbrowser-tab,
.tab-background,
.tabbrowser-tab:not([selected]):hover .tab-content {
    border-radius: 10px 10px 0 0 !important;
    position: relative !important;
    border: 0 !important;
}
.tabbrowser-tab .tab-loading-burst {
    border-radius: 8px 8px 0 0 !important;
}
/* Fix stupid gap between pinned and normal tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: initial !important;
}
/* rounded outside tab corners */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack {
    overflow: visible;
}
:root {
    /* adjust this if outside corners appear too close to, or too far from, the tab.
    this kind of subpixel positioning depends on window scaling factor unfortunately. */
    --tab-corner-offset-magnitude: -5px;
}
.tabbrowser-tab .tab-stack:before,
.tabbrowser-tab .tab-stack:after {
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    width: 5px;
    height: 5px;
    z-index: 2;
    background-image: linear-gradient(var(--tab-bg-current), var(--tab-bg-current));
}
.tabbrowser-tab .tab-stack:before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI1IiBmaWxsPSIjMDAwIi8+PC9zdmc+")
            0/100% 100%,
        linear-gradient(#fff, #fff);
    mask-composite: exclude;
    left: var(--tab-corner-offset-magnitude);
}
.tabbrowser-tab .tab-stack:after {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUiIGN5PSIwIiByPSI1IiBmaWxsPSIjMDAwIi8+PC9zdmc+")
            0/100% 100%,
        linear-gradient(#fff, #fff);
    mask-composite: exclude;
    right: var(--tab-corner-offset-magnitude);
}
.tabbrowser-tab :is(.tab-line, .tab-context-line) {
    z-index: 3;
    position: relative !important;
}
.tabbrowser-tab {
    z-index: 0;
}
.tabbrowser-tab .tab-content {
    z-index: 1;
}
.tabbrowser-tab[pinned] .tab-stack:before,
.tabbrowser-tab[pinned] .tab-stack:after {
    z-index: 6;
}
.tab-icon-stack {
    z-index: -1;
}
#tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer])
    .tabbrowser-tab[first-visible-tab]:not([justmoved], [style*="transform"])
    .tab-stack:before,
#tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer])
    .tabbrowser-tab[last-visible-tab]:not([justmoved], [style*="transform"])
    .tab-stack:after {
    display: none;
}
.tabbrowser-tab:not([selected], [pinned]) {
    --tab-bg-current: transparent;
}
.tabbrowser-tab[selected] {
    --tab-bg-current: var(--lwt-selected-tab-background-color, transparent);
}
.tabbrowser-tab:not([selected], [multiselected]):hover {
    --tab-bg-current: color-mix(in srgb, currentColor 11%, var(--lwt-accent-color));
}
.tabbrowser-tab[multiselected]:not([selected]) {
    --tab-bg-current: color-mix(
        in srgb,
        var(--lwt-selected-tab-background-color, transparent) 90%,
        var(--lwt-accent-color)
    );
}
#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([selected="true"], [multiselected]) {
    --tab-bg-current: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
}
/* hover background color must be solid, no transparency */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
    background: color-mix(in srgb, currentColor 11%, var(--lwt-accent-color)) !important;
}
#tabbrowser-tabs[movingtab] .tab-background:is([selected="true"], [multiselected]) {
    background: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
    opacity: initial !important;
}
#tabbrowser-tabs:not([movingtab]) .tab-background[multiselected="true"]:not([selected="true"]) {
    background: color-mix(
        in srgb,
        var(--lwt-selected-tab-background-color, transparent) 90%,
        var(--lwt-accent-color)
    ) !important;
    opacity: initial !important;
}
/* z-index must be set correctly so corners appear on the same layer as tabs */
.tabbrowser-tab {
    position: relative;
}
/* hide scrollbuttons since corners extend the dimensions of the scrollbox.
this is mainly for people with OCD, you don't have to hide the scrollbuttons.
but if you delete these rules I think you'll notice some mildly irritating behavior. */
#scrollbutton-up,
#scrollbutton-down {
    display: var(--uc-scrollbutton-visibility, -moz-box) !important;
}
#tabbrowser-arrowscrollbox,
arrowscrollbox[orient="vertical"],
#scrollbutton-up[hidden],
#scrollbutton-down[hidden] {
    --uc-scrollbutton-visibility: none;
}

***************************************************************
https://www.reddit.com/r/FirefoxCSS/comments/pbonkn/tab_slopingrounding_at_bottom_of_tab/

il existe plusieurs approches pour cela, mais voici comment je préfère le faire car cela vous permet de faire des coins avec un assez petit rayon. il existe des méthodes plus simples qui vous obligent à courber tout le bord de l'onglet, de sorte qu'il ressemble davantage à une forme sinusoïdale qu'à un simple rectangle aux coins arrondis. mais ouais j'aime mieux cette façon. 

l'idée consiste essentiellement à créer un carré dans les coins inférieurs de chaque onglet et à leur appliquer un masque circulaire. si vous voulez un rayon plus grand, vous pouvez décoder ces images de masque base64. ils sont juste ceci et cela . vous pouvez les enregistrer dans votre dossier Chrome et référencer simplement le nom du fichier au lieu d'utiliser une URL de données. J'ai essayé de le saisir avec utf8 mais pour une raison quelconque, cela ne fonctionne plus sur un nouveau profil, j'ai donc utilisé base64 pour cet exemple. peut-être qu'il y a une nouvelle préférence qui change la fonctionnalité d'URL de données utf. mais de toute façon, je préfère les enregistrer en tant que fichiers, c'est donc ce que je recommanderais.

ce n'est qu'une version très simplifiée de celui que j'utilise . la version simple ne tient pas compte des lignes de tabulation possibles sur le bord inférieur de l'onglet, car j'ai remarqué que vous avez caché la ligne de tabulation, et elle est de toute façon au-dessus de nos jours. il n'utilise également que quelques couleurs d'arrière-plan pour correspondre aux couleurs vanille actuelles. mais les arrière-plans des onglets doivent en fait être modifiés, car ils sont transparents par défaut. ce qui signifie que lorsque les coins se chevaucheraient avec l'onglet, ils produiraient un point lumineux à l'intersection. le code ci-dessus a donc des styles pour convertir ces couleurs transparentes en couleurs unies. vous devrez peut-être le manipuler, car un mélange de couleurs à 90 % n'équivaut pas à 90 % de transparence. aussi vous voudrez vous assurer que vous avez layout.css.color-mix.enabledet layout.css.color-mix.color-spaces.enableddéfini sur true dans about:config. ils devraient être par défaut mais vérifiez quand même.

il existe une autre approche où au lieu de créer de nouveaux pseudo-éléments carrés à masquer, vous masquez simplement l'onglet entier. comme vous faites essentiellement la même chose où une image SVG prend une bouchée de l'onglet au lieu d'un carré à côté de l'onglet. cela présente certains avantages, mais je pense que cela pourrait causer plus de problèmes de scrollbox, et cela vous oblige à créer un vecteur plus complexe. en utilisant des carrés, il suffit de tracer le tracé d'un cercle pour le masquer. mais si nous masquons l'onglet lui-même, nous devons tracer le chemin d'un cercle et d'un rectangle tangent au cercle. essentiellement une forme de pilule avec l'extrémité supérieure s'étendant hors de la boîte de visualisation. c'est tout à fait possible, je ne l'ai pas encore essayé.

oh, et aussi, si vous masquiez l'onglet lui-même, la zone que vous avez masquée serait toujours cliquable. vous devrez donc utiliser un chemin de détourage à la place, mais cela signifierait que vous devez dessiner l'inverse de la forme et que vous ne pouvez pas utiliser un chemin composite. Je pense que j'ai initialement essayé clip-path au lieu de mask lorsque je travaillais sur la méthode des pseudo-éléments carrés, mais j'ai rencontré ce problème. et il n'était pas nécessaire d'aller plus loin, car lorsque vous utilisez des pseudo-éléments, vous n'avez de toute façon pas à vous soucier de cliquer. vous pouvez simplement rendre le carré entier non cliquable avec pointer-events: none;puisqu'il s'agit d'un élément distinct. bien sûr, cela signifie que tout le coin est non cliquable. avec clip-path, vous pouvez obtenir de belles subtilités où toute la zone peinte est cliquable et non la zone écrêtée. mais la zone peinte du coin est si petite qu'il est de toute façon très difficile de cliquer dessus.