Rounded tab bar buttons (Firefox 133 and newer)

[QNetITQ]

There is a side effect! Some icons may be cut off at the edges

Create a file to add third-party styles (In the options description) and add the code below

Updated December 02.2024

/* ---------- Rounded tab bar buttons ---------- */

.browser-titlebar
{
    --toolbarbutton-border-radius: 50px !important;
    --tab-border-radius: 50px !important;
}

#tabs-newtab-button
{
    margin-inline-start: calc(-1 * var(--tab-first-last-inline-margin)) !important;
}

.toolbarbutton-1:has(+ #tabbrowser-tabs:not([overflow])),
.toolbarbutton-1:has(+ #tabbrowser-tabs[overflow][haspinnedtabs])
{
    margin-inline-end: calc(-1 * var(--tab-first-last-inline-margin)) !important;
}

[tockudex]

Thanks for the info, it's exactly what I was looking for !

I think it'd be great to integrate these line (and the others from the discussion) into your project, as they refresh Firefox's style and allow for an easier turn on/off mechanism.