How to remove the border beneath an active tab?

Esor

I am writing a QSS stylesheet and would like to replicate the look in Fusion where there is no border between the active tab and the pane:

When I apply my own stylesheet there is a border between them like this:

I was reading through the reference docs and saw "Overlapping tabs for the selected state are created by using negative margins or using the absolute position scheme.", but it seems like tabs render underneath the pane and z-index isn't supported in QSS so I don't understand how that's possible, here's what it looks like with a large negative margin:

Esor

Ah I found the solution! Christian was correct that the border is for the pane which I already knew, but the problem is that if you disable it you get a blank patch beside the tabs:

I found the solution here and I don't really understand why it works and doesn't remove the top border like shown above, but it does. To get it working on all sides my solutions was this (I'm using a SCSS to QSS compiler):

QTabWidget {

    &::pane {
        &:top {
            top: -1px;
        }

        &:bottom {
            bottom: -1px;
        }

        &:left {
            left: -1px;
        }
        &:right {
            right: -1px;
        }
}

I'm still missing the border underneath the inactive tab which is not ideal but looks fine with my color set

Christian Ehrlicher

I don't think this border belongs to the tab but the widget below.

Esor

Ah I found the solution! Christian was correct that the border is for the pane which I already knew, but the problem is that if you disable it you get a blank patch beside the tabs:

I found the solution here and I don't really understand why it works and doesn't remove the top border like shown above, but it does. To get it working on all sides my solutions was this (I'm using a SCSS to QSS compiler):

QTabWidget {

    &::pane {
        &:top {
            top: -1px;
        }

        &:bottom {
            bottom: -1px;
        }

        &:left {
            left: -1px;
        }
        &:right {
            right: -1px;
        }
}

I'm still missing the border underneath the inactive tab which is not ideal but looks fine with my color set