Sowas könnste mal testen; im Prinzip sollte jedes background-image benutzbar sein, aber der Rest von deinem CSS Code für die Tabs schiesst hier quer, daher nur ein grober Ansatz.
Wie gesagt, border-image kann man nicht benutzten, deswegen.
JavaScript
/* Ungelesen Tabs mit grüner Ecke */
(async (url) => {
if (location != url) return;
let css =`
/*
#TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background {
border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
}
*/
#TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background::after {
content: "";
width: 100%;
height: 100%;
border-radius: inherit;
background-image: linear-gradient(lightgreen, lightgreen);
background-size: 10px 10px;
background-position: top right;
background-repeat: no-repeat;
}
`;
let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");
Alles anzeigen