Search code examples
qt5stylingqpushbuttonqtwidgets

How to avoid text clipping for QPushButton with borderimage

I am styling a QPushButton with a border image with 28px border (for really round corners) Like so:

#MyApp QPushButton
{
    margin:0;
    padding: 0;
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

However, it seems that when the button is rendered, the text label on the button gets clipped to the inside patch of the border image. In my case this turns out disastrous:

enter image description here

How can I fix this so that the text is rendered over the entire surface of the button, including the border edges?

Solution

  • This turned out to be simpler and more intuitive than first anticipated.

    The solution was to set a negative padding on the button to the same as the border image radius like so:

    #MyApp QPushButton
{
    margin:0;
    padding: -28px; /* THIS SOLVED IT */
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

    Now the button looks right:

    enter image description here