QPushButton rounded gradient border with QSS

Question

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?

It works fine when you remove the radius. It seems like the gradient is computed for the radius-part of the border independently from the border itself. And this radius-part is half of the corner for each border. — ymoreau, Aug 23 '17 at 13:24

score 3 · Accepted Answer · answered Oct 02 '18 at 18:48

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.

score 0 · Answer 2 · answered Aug 23 '17 at 13:27

0

I searched a little and i saw two ways, but the second uses border-image wich is not compatible with border radius, so you will have to deal with :before and :after.

just to link you the answer from camilo martin :

See the answer here

answered Aug 23 '17 at 13:27

Neil

390
2
14

Sadly, ":after" keyword is not accessible with Qt stylesheets. I could effectively create a widget that stack a rectangle and my button, but in that case I will loss the flexibility of the stylesheet. – aRaMinet Aug 23 '17 at 14:04

QPushButton rounded gradient border with QSS

2 Answers2