Rounded corners not shown for QPushButton in Qt Designer

Question

I want to the corners to be rounded and hover for a QPushButton in Qt designer. Changing the style sheet has no effect. What am doing wrong?

    QPushButton#pushButton_3{
        background: rgb(170, 170, 255);
        border: 2px  solid  rgb(0, 170, 255);
        border-style: outset;
        border-width: 2px;
        border-radius: 20px;
        color: white;   
    }
    
    QPushButton:hover#pushButton_3{
        background-color:  rgb(0, 255, 255);
        border: 2px  solid  (0, 255, 255);
    }

This is what I get when the above style sheet is set:

Answer 1

TL;DR

Use smaller values for border-radius, usually half of a standard font size (2 <= radius <= 10).

Further explanation

The QSS border radius must have a reasonable value.

The private QStyleSheetStyle normalizes the border radius (or, better, all four border radii) based on the bounding rect of the widget, which includes the border size(s).

Whenever any border radius exceeds the size related to its corner, all radius are ignored.

For instance, if the rectangle of a widget has height 10, the sum of its top-left and bottom-left radii must be equal or less than 10, otherwise the left corner will be squared.

Note that widgets normally consider the border only for their size hint, not their minimum size hint, and that behavior also can change depending on the current style.

A button is normally created using the current style's pixelMetric() and fontMetrics(), and since a pretty standard height of a button is ~30 pixels, considering the above, the border-radius specified is excessive: the sum of any corner component is always greater than the widget height, so the radii are ignored, and the border will be squared.

So, how to set a proper border radius?

The easy answer is: use "small" values, normally no more than twice or four times the border width.

The actual answer is more complex, as we need to consider that widgets often have some displayed text, and any modern OS supports both font scaling and high DPI screens.

QSS support various types of lengths other than the standard px:

• px: pixels (normally, physical pixels, AFAIK, the actual value depends on the OS and their implementation of High DPI);
• pt: the size of one point (based on the screen DPI, AFAIK, only used for text properties and ignored for widget/border sizes);
• em: the em width of the font (based on the displayed font);
• ex: the x-height of the font (as above);

If you want to properly support any modern OS, you probably need to use any of the last two values, and that's another reason for which is important to set a global style sheet for the application: as long as the app is created, you can know the default (or imported) fonts, and eventually set a main style sheet with formatted widths or sizes based on the current device pixel ratios and font metrics.