Important: Please read the Qt Code of Conduct -

[solved] setStyleSheet to QPushButton - rounded corners

  • 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.

  • Hi,

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

    You may find references "here: ": and examples to all widgets "here: ":

  • 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;

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

    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?

  • 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

  • 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.

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

  • 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.

  • Could you put the code, how did you do this? Maybe I do sth wrong.
    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?

  • 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.

  • 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.

  • Try this and also check this and

    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

Log in to reply