QPushButton rounded gradient border with QSS

Issue

I'm trying to make some "complex" button styling with Qt, using QSS, but I'm facing an issue that I can't resolve.

I want to do a gradient rounded border, for example going from blue on the left side to red on the right side:

result wanted

So, here is the stylesheet applied to a QPushButton:

background:
    white;
border-radius:
    30px;
border-style:
    solid;
border-width:
    10px;
border-color: 
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    red
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    blue;

And here is the result.

Pretty ugly, right?

Solution

This issue has been reported to Qt as a bug and there is no indication that they will ever fix it: https://bugreports.qt.io/browse/QTBUG-2221

I was able to work around it by creating a .png image on paint.net (you can use any image creation program) of this exact border. I set the background to transparent, and made sure the border of the image was the border I wanted on the QPushButton. I then set the .png file up as a resource and entered this in the QPushButton stylesheet:

border: none;
border-image: url(:/icons/images/blue-red-gradient.png);
background-color: rgb(255, 255, 255);
border-radius: 15px;

Here is what the final result looked like on my QMainWindow:

Another thing that you can do is to subclass a QPushButton and override it's paint event. Paint your border there and promote all of your QPushButtons to this new class. This would be more of a pain though, so I prefer my first solution personally.

Answered By - Link H.