[Fx58][default tabs] How to change or set tab border color

[suhr]

It lacks the left border.

[Aris-t2]

Is the border present, if you don't move the appbutton there?

What settings are you using, Which windows are you on?

[suhr]

Is the border present, if you don't move the appbutton there?

No.

What settings are you using, Which windows are you on?

Linux, i3wm.

[Aris-t2]

Is this the default theme or the "Light compact" theme?

[suhr]

Standard compact. I removed the blue line on an active tab with .tab-line { display: none !important; }.

FF 58 beta.

[Aris-t2]

Alright I see, you have not written, that this is about default tabs and not the squared tabs offered by CustomCSSforFx project.

Set border colors like this:

.tabbrowser-tab {
  border-top: 1px solid var(--tabs-border-color) !important;
  border-left: 1px solid var(--tabs-border-color) !important;
  border-right: 1px solid var(--tabs-border-color) !important;
}

[suhr]

Now it looks like this:

Not exactly the result I wanted to achieve.

[suhr]

#PanelUI-button #PanelUI-menu-button .toolbarbutton-badge-stack {
  border-radius: 0 !important;
  border-right: 1px solid var(--tabs-border-color) !important;
}

This gives a natural looking result when the leftmost tab is selected, but when it's not it looks weird:

I want the app button to look as natural as the + button looks.

[Aris-t2]

You have to adopt the code for your needs.

Only active tab needs borders, right? Or maybe left and right borders only?

Experiment with the code

.tabbrowser-tab[selected=true] {
  border-left: 1px solid var(--tabs-border-color) !important;
  border-right: 1px solid var(--tabs-border-color) !important;
}

[suhr]

It would be easier if I knew what I actually try to CSS.

Anyway, CSS I have already looks reasonable good. I'll share it, maybe it will be useful for someone else:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#PanelUI-button {
  -moz-appearance: none !important;
  -moz-box-ordinal-group: 0 !important;
  position: absolute !important;
  top: -29px !important;
}

#PanelUI-button #PanelUI-menu-button .toolbarbutton-badge-stack {
  border-radius: 0 !important;
  border-right: 1px solid var(--tabs-border-color) !important;
}

#TabsToolbar{
  -moz-padding-start: 30px !important;
}

.tab-line{
  display: none !important;
}

[Aris-t2]

You are still tying to create a proper border for selected tab (default tabs). Adding a border to main menu buttons right, is no solution.

Please throw this @namespace stuff away and never put it back. It not only breaks some styles it also is very very useless. It comes from a time were user styles were added to Stylish and could break web content, but nothing in userChrome.css can access web content.