Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QPushButton with border-image & 50% radius has pixelated border



  • I have the following styleSheet on a QPushButton

    // Note: The QPushButton has a width of 50px and height of 50px
    // So, the border-radius: 25px makes it completely round
    QPushButton {
        border: none;
        border-radius: 25px;
        background: transparent;
        border-image: url(/*my image path*/) 0 0 0 0 stretch stretch;
    }
    

    This gives me the intended result: A circular button with an image as its background.

    Although, the border of the QPushButton looks jagged/pixelated.

    Image of the end-result:
    alt text

    The large circle (the QPushButton in question) has a jagged/pixelated border, while the the small circle without a border-image has a smooth border.

    Is there a way to make the QPushButton have a smoother border?

    It may be worth mentioning that the border-image is a png.

    First time posting on the Qt forum, so I apologize if this is in the wrong place. I appreciate anyones help :)



  • In case anyone else has this problem:
    The first reply to this post ended up resolving my issue.

    This requires painting the image rather than loading it in via StyleSheets.

    Note: I also added:

    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
    painter.setRenderHint(QPainter::HighQualityAntialiasing, true);
    

    To further smoothen it out.

    You can then set the QPushButtons icon to the returned QPixmap.

    It seemed that the antialiasing was acting weird with the rounded border and border-image.