Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QPushButton with border-image & 50% radius has pixelated border

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

Scheduled Pinned Locked Moved Solved General and Desktop
qpushbuttonstylesheetborderimageborder-radius
3 Posts 2 Posters 2.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MF_DANTE
    wrote on 1 Oct 2020, 01:05 last edited by
    #1

    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 :)

    1 Reply Last reply
    0
    • M Offline
      M Offline
      MF_DANTE
      wrote on 1 Oct 2020, 02:42 last edited by MF_DANTE 10 Jan 2020, 02:45
      #2

      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.

      1 Reply Last reply
      0
      • T Offline
        T Offline
        tataeress
        wrote on 21 Sept 2022, 15:43 last edited by
        #3

        I was randomly trying to look for answers, and found out, even if that was not supposed to be the answer to my question, that :
        using "border-image" instead of "background-image" or "image" literally remove the pixelized stuff and SOVLES IT ONCE FOR ALL !

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved