How do you prevent the border from enlarging the widget?

Question

I want the buttons to stay the same size after I click them. If that's not possible, I need them to at least grow in their own predefined box such that they dont push the other buttons away.

Here's the code:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="BoardButton" parent="GtkButton">
        <property name="has-frame">false</property>
        <style>
            <class name="board-buttons"></class>
            <class name="circular"></class>
        </style>
        <child>
            <object class="GtkImage" id="image">
                <property name="resource">/com/fullaccess/ChineseCheckers/ui/assets/blue_ball.png</property>
            </object>
        </child>
    </template>
</interface>

.board-buttons {
    background: none;
    border-style: hidden;
}

.board-buttons:hover {
    background: none;
}

.board-buttons:focus {
    border: 2px solid black;
    border-style: dashed;
}

Answer 1

There are a few ways of achieving this, here are a couple:

1. Use outline rather than border to highlight on focus:

.board-buttons:focus {
    outline: 2px solid black;
    outline-style: dashed;
}

2. Render an invisible border all the time, which gets overridden by the :focus style when appropriate

.board-buttons {
    background: none;
    border: 2px solid transparent;
    margin: -2px;
}

outline is well supported in modern browsers, so you should only need to consider the second solution if you have legacy support requirements.