Qt Stylesheets - Border with gap at the top and bottom

Question

In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:

I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.

EDIT:

Here is the stylesheet I currently have for the QTabWidget:

QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;

Btw, this is not a Python nor PyQt related topic, I'd suggest you to remove those tags and add the general Qt tag instead. Also, try to use better formatting and indentation when posting style sheets too. — musicamante

musicamante musicamante · Accepted Answer · 2019-06-11T18:50:17

Yes, you can by using border-image.

This answer is CSS only related, but Qt's implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151

In short, you create a small square png image with the intended borders (in your case, you'll need to create only the right dashed part, the size depends on the dash pattern you need.

Unfortunately, when using rounded corners Qt "cuts" away half of the border width, so you'll see a small gap outside the border between two adjacent tabs.

I've created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won't need them):

This is how it appears when zoomed in an image editor:

After that, this is what you'll need as a basis for your stylesheet:

        QTabBar:Tab {
            border-top-right-radius: 14px; 
            border-top-left-radius: 14px; 
            border-image: url(border.png) 2 repeat;
            padding: 2px;
        }
        QTabBar:Tab:!Selected {
            border-right: 2px;
        }

The "2" in the border-image declaration is the border width within the image, the "repeat" is required to tell Qt that the border pattern has to be repeated and not stretched. Also, remember to set the width of the border too, otherwise the image won't be shown.

And this is the result:

As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I'm afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn't work as expected and might even create issues against different platforms and Qt versions.

Qt Stylesheets - Border with gap at the top and bottom

1 Answers