Firefox Tab Close Button to the left (macOS style)

README.md

Current status (as of recent Firefox versions) The exact CSS sometimes needs small adjustments after major UI updates (e.g., Proton in 2021, or changes around Firefox 113+), but the approach still works in current versions. Step-by-step guide to do it

Enable userChrome.css support (only needs to be done once): Open Firefox and go to about:config in the address bar. Search for: toolkit.legacyUserProfileCustomizations.stylesheets Set it to true (double-click it).

Locate your profile folder: Go to about:support. Next to "Profile Folder", click Show in Finder.

Create the chrome folder and file (if they don't exist): Inside the profile folder, create a new folder called chrome (lowercase). Inside that chrome folder, create a plain text file called userChrome.css (also lowercase).

Add CSS code to move the close button to the left:

userChrome.css

/* 1. Container and Layout */
.tab-content {
    display: flex !important;
    align-items: center !important;
}

/* 2. Hide the original browser icon */
.tab-close-button .toolbarbutton-icon {
    display: none !important;
}

/* 3. The Button Box (Reduced further to 14px) */
.tab-close-button {
    order: -1 !important;
    display: flex !important;
    position: relative !important;

    width: 22px !important;
    height: 22px !important;
    padding: 4px !important;
    margin-inline-end: 4px !important;
    margin-inline-start: 2px !important;

    appearance: none !important;
    background: none !important;
    border: none !important;
    border-radius: 3px !important;
    /* Slightly tighter corner radius */
}

/* 4. The "Nano X" (Reduced by 50%) */
.tab-close-button::before,
.tab-close-button::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    /* Reduced width to 2.1px (exactly 50% smaller) */
    width: 2.1px !important;
    height: 1px !important;

    background-color: currentColor !important;
    opacity: 0.4 !important;
    /* Slightly higher opacity so it's still visible at this size */
    transition: opacity 0.15s ease !important;
}

/* The X shape rotation */
.tab-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.tab-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* 5. Hover State */
.tab-close-button:hover {
    background-color: var(--toolbarbutton-hover-background, rgba(0, 0, 0, 0.08)) !important;
}

.tab-close-button:hover::before,
.tab-close-button:hover::after {
    opacity: 1 !important;
}

/* 6. Layout Anchors */
.tab-icon-stack {
    order: 0 !important;
}

.tab-label-container {
    order: 1 !important;
}