[solved] setStyleSheet to QPushButton - rounded corners

never_ever

Hi,
I have problem with rounding corners of buttons. I am using setStyleSheet:

@
newButton->setStyleSheet(QString::fromUtf8("QPushButton{background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,"
"stop: 0 white, stop: 1 grey);"
"border-style: solid;"
"border-color: black;"
"border-width: 2px;"
"border-radius: 10px;}"));
@

And everything will be ok, because border of button is rounded, but the corners of background are out of the border and they are visible. Is there any way to get this corners rounded?

And second question: is there any way to learn more about setting custom styles? Is there some examples which widget has which attributes that I could change ie. in pushbutton I can chage border-style, border-width etc.

clochydd

Hi,

I guess you should work with padding to decrease the size of your background area.

You may find references "here: ":http://qt-project.org/doc/qt-5/stylesheet-reference.html and examples to all widgets "here: ":http://qt-project.org/doc/qt-5/stylesheet-examples.html

never_ever

Sorry, but it doesn't work. More, I found sth like that about padding:

bq. padding uses the background-color specified for whatever it is padding

So I think padding it's not the thing I should use or I use it wrong.
I add:

@
padding: 10 px 10px 10px 10px;
@

clochydd

Hi, I've just drawn a QPushButton with your settings:

@
QPushButton{
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 white, stop: 1 grey);
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 10px;
}
@

and all corners are perfectly filled - even if I increase the radius.

What Qt/OS version are you using?

never_ever

Qt 5.2.1, visual 2012, Win7

I create this buttons dynamically - if that change sth?
And this buttons are added to QGraphicsScene, where I have set image in background

clochydd

It should not - but it's possible.
What happens, if you try a button using the designer?

I will test with 5.2.1 and win7+mingw48 soon.

never_ever

In the designer I have only widget window with QGraphicsView expanded to whole window. And I can't add button to QGraphicsView.

clochydd

I've just checked with win7 and 5.2.0 and designer - mounted the QPushButton on top of a QGraphicsView and the styleSheet looks good.

never_ever

Could you put the code, how did you do this? Maybe I do sth wrong.
EDIT:
Ok, I should write everything: I use not only QGraphicsView, but also QGraphicsScene where I add pixmap and buttons.

Probably, I should set QGraphicsView as a parent to the PushButton, but how I should do this if I have my own class that inherits QPushButton class?

clochydd

I have no experience in using QGraphics... yet and I guess there lies the reason for your issues with the rounded corners.

That's what I've done to see if styleSheet works:
I've simply put a QGraphicsView on a QDialog and a QPushButton on top of that using the Designer. Then I modify the Stylesheet in the Designer.

never_ever

Ok, I found where the problem was. In my first solution I created button and then I added it to the scene. Now I do not do this, the only thing I change is to set graphicsView as a parent of that button. And now it works fine.

Kemkay

Try this and also check this https://doc.qt.io/qt-5/stylesheet-examples.html and https://doc.qt.io/qt-5/stylesheet-reference.html

QPushButton {
color: #333;
border: 2px solid #555;
border-radius: 20px;
border-style: outset;
background: qradialgradient(
cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #888
);
padding: 5px;
}

QPushButton:hover {
background: qradialgradient(
cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #bbb
);
}

QPushButton:pressed {
border-style: inset;
background: qradialgradient(
cx: 0.4, cy: -0.1, fx: 0.4, fy: -0.1,
radius: 1.35, stop: 0 #fff, stop: 1 #ddd
);
}