Qt CSS border + padding seems to cut off text
<p>I have several <code>QPushButton</code>s that are located beside each other. Each button has a padding of <em>8px</em> on the left and the right side. When one of them has focus I change the background-color. So far it looks fine:</p>

<p><a href="https://i.stack.imgur.com/7V92N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7V92N.png" alt="enter image description here"></a></p>

<p>In addition to the background-color change I want to apply a border of 2px in white. When I do that the text seems to be cut off by the size of my border. So with a border of 2px it looks like this:</p>

<p><a href="https://i.stack.imgur.com/ojsnw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojsnw.png" alt="enter image description here"></a></p>

<p>When I increase the border-size to, for example, 4px my text vanishes completely because the button does not increase it's size correctly.</p>

<p>I use the following CSS in Qt:</p>

<pre><code>QPushButton {
    background-color: transparent;
    border-style: none;
    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}
</code></pre>

<p><strong>Edit, Solution from Rushi:</strong>
The idea is to define the border for the original (non-focused) button with a transparent color. When it receives focus the width of the button seems to be computed correctly. I don't know why Qt computes it correctly in this case, but it works for me :-)</p>

<p>CSS with the fix:</p>

<pre><code>QPushButton {
    background-color: transparent;

    /* we define our border here but with transparent color */
    border-style: solid;
    border-width: 2px;
    border-color: transparent;

    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-color: white;
}
</code></pre>