How to avoid text clipping for QPushButton with borderimage

Question

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?

score 3 · Accepted Answer · answered Jul 05 '14 at 21:06

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

How to avoid text clipping for QPushButton with borderimage

1 Answers1